スクロールで表示・非表示が切り替わる固定ヘッダー実装【軽量JS・実務向け】

<header class="site-header" id="header">
  <div class="inner">
    <div class="logo">Site Logo</div>
    <nav>Menu</nav>
  </div>
</header>

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #111;
  color: #fff;
  transition: transform .3s ease;
  z-index: 1000;
}

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

.inner {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
}

const header = document.getElementById('header');

let lastScroll = 0;

window.addEventListener('scroll', () => {
  const current = window.pageYOffset;

  if (current > lastScroll && current > 80) {
    header.classList.add('hide');
  } else {
    header.classList.remove('hide');
  }

  lastScroll = current;
});

lastScroll

current > 80

transition: transform .5s ease;

box-shadow: 0 4px 12px rgba(0,0,0,.15);