[jQuery] 스크롤 업/다운 Scroll down Scroll Up 헤더 스크롤 이벤트

 

 

페이지를 스크롤 할 때

아래로 내리면 (scroll down) 헤더가 사라졌다가 올리면(scroll up) 다시 헤더가 나오는 이벤트

 

[ jQuery ]

<script>
    let lastScroll = 0;
    $(window).on('scroll'), function(){
      let scrollTop = $(this).scrollTop();
      if(scrollTop > lastScroll) {
        // down
        $('header').removeClass('fixed');
      } else {
        // up
        $('header').addClass('fixed');
      }
      lastScroll = scrollTop;
     });
 </script>

 

 

[ CSS ]

<style>
    .header{
      width : 100%;
      height : 80px;
      position : fixed;
      left : 0;
      top : -80px; /* header의 height값을 빼주면서 숨김처리 */
      z-index : 9999;  
    }
    .header.fixed{
      top : 0; /* top의 값을 0으로 보여주면서 header 노출 */
    }
</style>