스크롤 업/다운 이벤트 (scroll up/down event)

홈페이지에 스크롤 할 때

헤더가 안보였다가 스크롤을 올리면 다시 헤더가 나오는 경우 쓸 수 있는 스크립트이다.

꼭 헤더 스크롤 이벤트뿐만 아니라 다양하게 스크롤 업/다운 시 이용할 수 있는 스크립트이다.

 

jQuery

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

JAVASCRIPT

let lastScroll = document.documentElement.scrollTop || 0
document.addEventListener('scroll', function(){
  let scrollTop = document.documentElement.scrollTop
  if(scrollTop > lastScroll) {
    // down
  } else {
    //up
  }
  lastScroll = scrollTop
})

 

css

.header_wrap {position: fixed; left: 0; top: -90px; width: 100%; z-index: 9999; transition: all .3s;}
.header_wrap.fixed {top: 0;}

이렇게 css를 주고 처음부터 .header_wrap에 fixed 클래스를 주면 처음에는 top값이 0이여서 보이게 되고,

스크롤을 내릴때는 숨기고 올릴때는 나오게 할 수 있다.