[Javascript] header 스크롤 방향 이벤트

상단의 header에 position:fixed를 주면서 top:0, left:0에 위치해서 스크롤 시에도 header가 노출이 되어

스크롤시 가끔은 디자인을 가려서 아쉬울 때가 있다.

그래서

스크롤을 아래로 내리면 헤더는 사라지고, 스크롤을 위로 올리면 헤더는 다시 나타나는 기능을 구현했다.

스크롤을 위로 올린다는 것은 위에 내용을 보거나 다른 곳으로 이동하고 싶다는 의미이기 때문에 UX를 위한 기능이라고 볼 수 있다.

 

일단,

$(function() {
  var prevScrollTop = 0;

  document.addEventListener("scroll", function(){
      
      var nowScrollTop = $(window).scrollTop(); //현재 스크롤 위치를 nowScrollTop 에 저장
      
      if (nowScrollTop > prevScrollTop){ $('header').addClass('active'); } 
      // 스크롤 방향(Down) 내릴때 -> 헤더에 active 클래스 추가
      else { $('header').removeClass('active'); } // 스크롤 방향(Up) 올릴때 -> 헤더에 active 클래스 제거
      prevScrollTop = nowScrollTop;  // prevScroll, nowScrollTop 조건 판단 후, 현재 스크롤값을 prevScrollTop 에 저장

  });

});

를 script.js에 삽입한다.

스크롤을 내릴때 헤더에 active클래스를 추가하고

스크롤을 올릴 때 헤더에 active 클래스를 제거한다.

 

그러고 css에는

header.active {transform: translateY(-100%);}

header에 클래스 active 가 추가 되었을 때 Y축으로 -100% 이동시켜 header가 보이지 않도록 해주면 된다.

매끄럽게 올라가기 위해서 header에 transition을 추가해주면 좋다.