【JavaScript】上向きスクロールで表示されるヘッダーの作り方｜Vanilla JS・CSS transition・throttle・モバイル対応まで解説

<header class="site-header">
  <nav>
    <a href="/" class="logo">MySite</a>
    <ul class="nav-links">
      <li><a href="/about">About</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>
<main class="content">
  <!-- ページコンテンツ -->
</main>

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  /* スムーズなスライドアニメーション */
  transition: transform 0.3s ease;
}

/* 下スクロール時: ヘッダーを上に隠す */
.site-header.is-hidden {
  transform: translateY(-100%);
}

/* ヘッダーの高さ分だけコンテンツを下にずらす */
.content {
  padding-top: 60px;
}

const header = document.querySelector(".site-header");
let lastScrollY = 0;

window.addEventListener("scroll", () => {
  const currentScrollY = window.scrollY;

  if (currentScrollY > lastScrollY && currentScrollY > 60) {
    // 下スクロール & ヘッダーの高さを超えた位置
    header.classList.add("is-hidden");
  } else {
    // 上スクロール or ページトップ付近
    header.classList.remove("is-hidden");
  }

  lastScrollY = currentScrollY;
});

const header = document.querySelector(".site-header");
let lastScrollY = 0;
let ticking = false;

function updateHeader() {
  const currentScrollY = window.scrollY;

  if (currentScrollY > lastScrollY && currentScrollY > 60) {
    header.classList.add("is-hidden");
  } else {
    header.classList.remove("is-hidden");
  }

  lastScrollY = currentScrollY;
  ticking = false;
}

window.addEventListener("scroll", () => {
  if (!ticking) {
    requestAnimationFrame(updateHeader);
    ticking = true;
  }
});

const header = document.querySelector(".site-header");
let lastScrollY = 0;
let throttleTimer = null;

function onScroll() {
  const currentScrollY = window.scrollY;

  if (currentScrollY > lastScrollY && currentScrollY > 60) {
    header.classList.add("is-hidden");
  } else {
    header.classList.remove("is-hidden");
  }

  lastScrollY = currentScrollY;
}

// 100ms ごとに最大 1 回実行
window.addEventListener("scroll", () => {
  if (throttleTimer) return;
  throttleTimer = setTimeout(() => {
    onScroll();
    throttleTimer = null;
  }, 100);
});

(() => {
  const header = document.querySelector(".site-header");
  if (!header) return;

  const HEADER_HEIGHT = header.offsetHeight;
  const SCROLL_THRESHOLD = 5; // 微小スクロールを無視
  let lastScrollY = 0;
  let ticking = false;

  function update() {
    const currentScrollY = window.scrollY;
    const diff = currentScrollY - lastScrollY;

    // ページトップ付近では常に表示
    if (currentScrollY <= HEADER_HEIGHT) {
      header.classList.remove("is-hidden");
      lastScrollY = currentScrollY;
      ticking = false;
      return;
    }

    // 微小スクロール（閾値以下）は無視（チラつき防止）
    if (Math.abs(diff) < SCROLL_THRESHOLD) {
      ticking = false;
      return;
    }

    if (diff > 0) {
      // 下スクロール → 隠す
      header.classList.add("is-hidden");
    } else {
      // 上スクロール → 表示
      header.classList.remove("is-hidden");
    }

    lastScrollY = currentScrollY;
    ticking = false;
  }

  window.addEventListener("scroll", () => {
    if (!ticking) {
      requestAnimationFrame(update);
      ticking = true;
    }
  }, { passive: true });
})();

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: transform 0.3s ease;
  will-change: transform;  /* GPU アクセラレーションを明示 */
}

.site-header.is-hidden {
  transform: translateY(-100%);
  box-shadow: none;  /* 隠れている間は影を消す */
}

.content {
  padding-top: 60px;  /* ヘッダーの高さ分 */
}

// iOS の慣性スクロールで scrollY が負になる場合の対策
const currentScrollY = Math.max(0, window.scrollY);

// 画面の向き変更時にヘッダーの高さを再取得
let headerHeight = header.offsetHeight;
window.addEventListener("resize", () => {
  headerHeight = header.offsetHeight;
});

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* sticky はスクロールしても常に表示される */
/* 「上スクロール時だけ表示」は JS が必要 */

// 200px 以上スクロールしてから隠し始める
const HIDE_AFTER = 200;

if (diff > 0 && currentScrollY > HIDE_AFTER) {
  header.classList.add("is-hidden");
} else if (diff < -SCROLL_THRESHOLD) {
  header.classList.remove("is-hidden");
}

/* CSS */
.site-header {
  background: transparent;
  transition: background 0.3s, transform 0.3s;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* JS（update 関数内に追加） */
if (currentScrollY > 10) {
  header.classList.add("is-scrolled");
} else {
  header.classList.remove("is-scrolled");
}

.site-header {
  height: 80px;
  transition: height 0.3s, transform 0.3s;
}
.site-header.is-compact {
  height: 50px;  /* スクロール後は小さくなる */
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

// Tab キーでヘッダー内にフォーカスが入ったら表示
header.addEventListener("focusin", () => {
  header.classList.remove("is-hidden");
});