JavaScriptでヘッダーを固定＆スクロールで背景色を変える方法

22

Views

Webサイトを操作していると、スクロールに応じてヘッダーが固定されたり、背景色が変わったりするUIをよく見かけますよね。この記事では、JavaScriptを使ってその仕組みを実装する方法を解説します。

実装イメージ

  • ヘッダーが画面上部に固定される
  • スクロールすると背景色が切り替わる
  • ページトップでは透明、スクロール後は色付き背景に

HTML構造

<header id="site-header">
  サイトのヘッダー
</header>

<main>
  <p>ここにメインコンテンツが入ります。</p>
</main>

CSSで基本の固定スタイルを指定

#site-header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1em;
  transition: background-color 0.3s;
  z-index: 1000;
}

#site-header.transparent {
  background-color: transparent;
}

#site-header.solid {
  background-color: #333;
  color: white;
}

JavaScriptで背景色を切り替える

document.addEventListener("DOMContentLoaded", () => {
  const header = document.getElementById("site-header");

  const updateHeader = () => {
    if (window.scrollY > 50) {
      header.classList.remove("transparent");
      header.classList.add("solid");
    } else {
      header.classList.remove("solid");
      header.classList.add("transparent");
    }
  };

  window.addEventListener("scroll", updateHeader);
  updateHeader(); // 初期状態を確認
});

補足：ヘッダーの下に余白を作る

固定ヘッダーの分だけ、mainに余白を追加するのを忘れずに！

main {
  margin-top: 80px; /* ヘッダーの高さに応じて調整 */
}

おわりに

この方法を使えば、ヘッダーの存在感をコントロールしてユーザー体験を高めることができます。アニメーションやスクロール量による変化も組み合わせれば、さらに高度な演出も可能です。

次回は「スクロール量に応じて要素をフェードインさせる方法」もご紹介予定です！

関連記事