상품 진열 상세카테고리 구현

스크롤을 내렸을때는 진열상품의 상세카테고리가 숨겨지고,
스크롤을 올렸을때만 카테고리가 나타나는 sticky메뉴를 자바스크립트로 구현해보자!

<header>
  <nav id="menu">메뉴</nav>
</header>

<main>
  <p>본문 내용</p>
</main>

/*css*/
header {
  height: 50px;
  position: fixed;
  top: 0;
  background-color: #ffffff;
  width: 100%;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  transition: all 0.3s ease-in-out;
}

header.hidden {
  transform: translateY(-50px);
}

#menu {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  font-size: 16px;
  color: #333333;
}

main {
  padding-top: 50px;
}

위 코드는 html과 css의 내용이다.

//js
const header = document.querySelector('header');
const menu = document.querySelector('#menu');
let prevScrollpos = window.pageYOffset;

window.onscroll = function() {
  let currentScrollPos = window.pageYOffset;

  if (prevScrollpos > currentScrollPos) {
    // 스크롤 올릴 때
    menu.style.top = `${header.offsetHeight}px`;
    menu.classList.remove('hidden');
  } else {
    // 스크롤 내릴 때
    menu.classList.add('hidden');
  }

  prevScrollpos = currentScrollPos;
};

위 코드는 바닐라로 스크립트를 구현한 내용이다.