scrollTop 과 offset().top 관련 질문

scrollTop 과 offset().top 관련 질문

QA

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 개발자 콘솔 열어서 콘솔탭의 에러를 보세요.

아래 코드는 딱히 최적화의 필요성을 못느끼겠습니다.

중복호출 하신다면 현 색션 상태를 변수에 담아두는것도 좋은 방법입니다.

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

회원로그인

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