scrollTop 과 offset().top 관련 질문
본문
아래 코드는 제대로 실행이 안되고
<div id="main_page">
<div class="visual_part"></div> //헤더 색상이 변해야 하는 섹션
<div class="creative_part"></div> //헤더 색상이 돌아와야 하는 섹션
</div>
<script>
$(document).ready(function() {
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= $('.visual_part').offset().top) { //순서대로 색상 변해야 하는 섹션
$('#header').addClass('white');
} else if (scrollTop >= $('.creative_part').offset().top) { //순서대로 색상 돌아와야 하는 섹션(적용 안됨)
$('#header').removeClass('white');
} else {
$('#header').removeClass('white');
}
})
})
</script>
이 코드는 제가 원하는대로 노출되는 이유는 뭘까요?
좀 더 이 코드를 깔끔하게 정리할 수는 없을까요?
<div id="main_page">
<div class="visual_part"></div>
<div class="creative_part"></div>
</div>
<script>
$(document).ready(function() {
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= $('.creative_part').offset().top) { //제일 아래 섹션
$('#header').removeClass('white');
} else if (scrollTop >= $('.visual_part').offset().top) { //중간 섹션
$('#header').addClass('white');
} else {
$('#header').removeClass('white');
}
})
})
</script>
답변 1
실행이 안된다면 F12 개발자 콘솔 열어서 콘솔탭의 에러를 보세요.
아래 코드는 딱히 최적화의 필요성을 못느끼겠습니다.
중복호출 하신다면 현 색션 상태를 변수에 담아두는것도 좋은 방법입니다.
답변을 작성하시기 전에 로그인 해주세요.
