javascript 스크롤 방향 감지해 헤더 보여주기

스크롤 방향을 감지해서 헤더를 보여주거나 감추거나 해보자.

scroll up에 헤더 숨김

방법 1: wheel 이벤트

js

// wheel 이벤트는 마우스휠 이벤트라서 pc만 가능
window.addEventListener('wheel', e => {
  const scrollUp = e.deltaY <= 0;
  if ( window.scrollY > 100 &&  scrollUp) {
    $('body').addClass('scrollUp');
  } else {
    $('body').removeClass('scrollUp');
  }
});

CSS

body.scrollUp #header {
    transform: translateY(-100%);
}

방법 2: scroll 이벤트

js

// 스크롤 방향에 따라 헤더 노출 (pc, 모바일 둘 다 가능)
let lastScrollY = 0;
window.addEventListener('scroll', e => {
  const scrollY = window.scrollY;
  const scrollUp = scrollY < lastScrollY;

  if ( scrollY > 100 &&  scrollUp) {
    $('body').addClass('scrollUp');
  } else {
    $('body').removeClass('scrollUp');
  }
  lastScrollY = scrollY;
});

CSS

body.scrollUp #header {
    transform: translateY(-100%);
}

scroll down에 헤더 숨김

방법 1: wheel 이벤트

js

// 스크롤 방향에 따라 헤더 노출 (wheel 이벤트는 마우스휠 이벤트라서 pc만 가능)
window.addEventListener('wheel', e => {
  const scrollDown = e.deltaY > 0;
  if (scrollDown) {
    $('body').addClass('scrollDown');
  } else {
    $('body').removeClass('scrollDown');
  }
});

CSS

body.scrollDown #header {
    transform: translateY(-100%);
}

방법 2: scroll 이벤트

js

let lastScrollY = 0;
window.addEventListener('scroll', e => {
  const scrollY = window.scrollY;
  const scrollDown = scrollY > lastScrollY;
  if (scrollDown) {
    $('body').addClass('scrollDown');
  } else {
    $('body').removeClass('scrollDown');
  }
  lastScrollY = scrollY;
});

CSS

body.scrollDown #header .header_box {
    transform: translateY(-100%);
}