특정 class 의 영역에 도달 시 이벤트 주는 제이쿼리..?

특정 class 의 영역에 도달 시 이벤트 주는 제이쿼리..?

QA

특정 class 의 영역에 도달 시 이벤트 주는 제이쿼리..?

본문

GNB메뉴를

특정 class 영역에 도달하면 bold나

스타일을 만지고 싶은데요

클릭하면 바꾸는건 간단한디

스크롤이나 화면을 내렸을 경우 바꾸는 방법이 있을까요?

 

관련링크나 조언 부탁드립니다 ㅠㅠ

2948941001_1616653639.7824.png

이 질문에 댓글 쓰기 :

답변 3

스크롤이벤트랑 해당 컨텐츠의 scrollTop를 구해서 비교하는 방법으로 하면되지않을까요?

스크롤 이벤트로 하면 유지보수가 힘들 것 같드라구요 계속 height를 수정해야해서
window 속성에서 특정 선택자를 감지할 수 있는게 있는지해서 ㅠㅠ
구글링을 하기엔 영어가 딸려서 ㅠㅠ 힘드네요

제이쿼리 엘리먼트 offset()으로 엘리먼트의 위치를 알 수 있습니다

그누보드 Q&A 게시판에서 

크롬 개발자도구를 여시고

 

Console 탭으로 가시 후

console.log('[지금 질문하기] 버튼의 위치', $('#consubmit2').offset().top);
console.log('스크롤의 위치', $(window).scrollTop());

넣어보세요

스크롤된 값이 엘리먼트의 위치보다 크다면 

브라우저의 상단을 통과한 게 되겠지요?

다시 개발자도구 콘솔에

$(window).scroll(function() {
    console.log($(window).scrollTop() - $('#consubmit2').offset().top > 0);
});

붙여넣기 하고 엔터 후 스크롤하면

true나 false가 찍힐텐데요

true: 지나감

false: 아직 도달하지 않음

으로 판단하실 수 있습니다

 

통과해서 브라우저 화면에 보이지 않는 걸 판단하고 싶다면

$('#consubmit2').height();

엘리먼트의 높이값으로 계산해보면 되겠습니다.

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT