[JavaScript] scrollTop과 offset

scrollTop은 현재 스크롤의 위치값을 나타낸다.

$(window).scrollTop();

 

이는 브라우저 상단에서 현재 스크롤까지 이동한 값을 나타내는 코드이다.

 

offset은 대상의 위치값을 나타낸다.

$('section').offset();

 

이는 section이라는 요소의 위치값을 나타내는 코드이다.

쉽게 말해 scrollTop은 가변적이고, offset은 고정적이다.

다만 offset이 항상 고정적인 것은 아닌데, 반응형에서 브라우저의 크기를 늘리거나 줄일 때 offset의 값도 변할 수 있다.

 

스크롤이 특정한 지점에 위치할 때, 이벤트가 발생하는 경우에 scrollTop과 offset이 모두 쓰인다.

var section2Offset = $('#section2').offset();
    $(window).scroll(function () {
        if ($(window).scrollTop() > section2Offset.top) {
            $('.progress-bar').attr("style", "width:75%");
        } else {
            $('.progress-bar').attr("style", "width:0%");
        }
    });

 

이는 #section2 의 offset 값을 구하고, offset의 top값이 스크롤보다 작을 때,

.progress-bar에 width:75%라는 스타일을 추가하고,

그렇지 않을 때, width:0%로 변경하는 코드이다.