특정 class 의 영역에 도달 시 이벤트 주는 제이쿼리..?
본문
GNB메뉴를
특정 class 영역에 도달하면 bold나
스타일을 만지고 싶은데요
클릭하면 바꾸는건 간단한디
스크롤이나 화면을 내렸을 경우 바꾸는 방법이 있을까요?
관련링크나 조언 부탁드립니다 ㅠㅠ
답변 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();
엘리먼트의 높이값으로 계산해보면 되겠습니다.