[자바스크립트] 마우스 스크롤시 현재 위치값 알아내기

마우스를 드래그 하면서 각 요소들에게 이벤트를 줘야 할경우가 종종있습니다.

그러기위해선 현재 위치값을 알아내야하는데 간단하게 알아낼수가 있습니다.

<script type="text/javascript">  

$("document").ready(function() {  

    $(window).scroll(function() {  

            var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.  

    });  

      

});  

</script> 

위에 코드를 보시면 scroll 이라는 제이쿼리 이벤트 함수를 이용하여 

마우스가 스크롤이 될때마다 스크롤탑이라는 제이쿼리 함수를 이용해서 

현재 위치를 알수 있습니다.

스크롤이 될때마다 현재위치를 알았다면 IF문과 결합하여 

스크롤이 어느정도 되면 이벤트가 발생이 될수 있게 할수 있습니다.

예문) 아래의 예문의 경우 스크롤을 할때 현재위치값이 탑으로부터 100이 되는 위치에 

원하는 선택자에 move라는 클래스를 추가를 하고 100보다 작으면 move라는 클래스를

삭제하라는 예문입니다. ^^

<script type="text/javascript">  

$("document").ready(function() {  

    $(window).scroll(function() {  

            var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다. 

if (position >= 100){

$('선택자').addClass('move')

}else{

$('선택자').removeClass('move')

}

    });        

});  

</script>