下にスクロールすると上に逃げ、上にスクロールすると戻ってくるヘッダ

多くのサイトで見られる邪魔にならないヘッダです。
スクロールに応じてhiddenクラスを追加したり消したりして実装します。

JavaScript

JavaScript

const header = document.querySelector('header');
let prevY = window.pageYOffset; // 前回のスクロール位置を初期化

window.addEventListener('scroll', () => {
  const currentY = window.pageYOffset; // 現在のスクロール位置を取得
  if (currentY < prevY) { // 上にスクロールしている場合
    header.classList.remove('hidden'); // hiddenクラスを削除して表示する
  } else { // 下にスクロールしている場合
  if (currentY > 0) { //Safariなどのバウンススクロール対策
      header.classList.add('hidden'); // hiddenクラスを追加して非表示にする
    }
  }
  prevY = currentY; // 前回のスクロール位置を更新
});

CSS

css

header {
  width: 100%;
  height: 80px;
  position: fixed;
  z-index: 10;
  transition: transform 0.3s 0.3s; /* アニメーションの設定 */
}

header.hidden {
  transform: translateY(-80px); /* ヘッダの高さだけ上に移動 */
}

デモはこちら！

See the Pen 下にスクロールすると上に逃げ、上にスクロールすると戻ってくるヘッダ by sogawa-BitStar (@sogawa-BitStar) on CodePen.