스크롤 높이에 반응해 클래스 추가 삭제하기

 

 

 

스크롤이 일정 부분 움직였을 때 원하는 곳에 클래스를 추가 삭제하는 방법을 알아보겠습니다.

 

$(function(){
     var fixScroll = 0;
     $(window).scroll(function(event){
          var scroll = $(this).scrollTop();
          if (scroll > 600){
          //스크롤 높이 설정
               $("header").addClass("fix");
          }
          else {
               $("header").removeClass("fix");
          }
          fixScroll = scroll;
     });
});

위 코드를 사용하면 스크롤 높이를 600 이동했을 때 header에 fix 클래스를 추가하고 스크롤이 제일 상단 탑으로 돌아갔을 때 fix 클래스를 삭제할 수 있습니다.