Categories: html css js

スクロールしても消えない！固定ヘッダーをHTML・CSS・JavaScriptで実装する方法

Webページを閲覧していると、上部にあるナビゲーションバーやロゴなどの「ヘッダー」が、スクロールしても常に画面上部に表示されているサイトをよく見かけます。これは「固定ヘッダー（Sticky Header）」と呼ばれ、ユーザーがどこまでスクロールしても必要な情報にすぐアクセスできるという利点があります。

本記事では、HTML・CSS・JavaScriptを用いて、スクロールに追従する固定ヘッダーの基本的な作り方から、より実用的なUI演出までを、サンプルコードと共にわかりやすく解説します。初心者でもすぐに使えるコードなので、ぜひ自分のWebサイトに取り入れてみてください。

固定ヘッダーの基本構造を作ろう（HTML編）
CSSで固定ヘッダーを実装する（position: fixed）
JavaScriptでスクロールに応じた演出を加える
スマホ対応のためのレスポンシブデザイン
注意点とトラブルシューティング
おしゃれなUIへのステップアップ
まとめ

固定ヘッダーの基本構造を作ろう（HTML編）

まずはHTMLで、固定したいヘッダーとその下に続くコンテンツ部分の基本構造を作成します。以下が最小限のHTMLサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定ヘッダーのサンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header class="site-header">
    <h1>My Website</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>コンテンツエリア</h2>
      <p>ここにたくさんのスクロールコンテンツを入れてください。</p>
      <!-- スクロールするためのダミーコンテンツ -->
      <div style="height: 2000px;"></div>
    </section>
  </main>

</body>
</html>

ここでは、<header>タグ内にロゴとナビゲーションリンクを設置しています。次にこのヘッダーを画面上に固定するためのCSSを作成します。

CSSで固定ヘッダーを実装する（position: fixed）

CSSを使えば、ヘッダーを簡単にスクロール追従させることができます。以下のようにposition: fixedを使いましょう。

/* style.css */
body {
  margin: 0;
  font-family: sans-serif;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  z-index: 1000;
}

.site-header nav a {
  color: white;
  margin-left: 15px;
  text-decoration: none;
}

main {
  padding-top: 80px; /* ヘッダーの高さに応じて余白を確保 */
}

ここでは、ヘッダーを固定するために position: fixed を使い、top: 0 で上部にピッタリと固定します。背景色やボックスシャドウで視認性もアップ。mainにパディングを入れることで、ヘッダーにコンテンツが隠れるのを防ぎます。

JavaScriptでスクロールに応じた演出を加える

CSSだけで固定ヘッダーは作れますが、JavaScriptを使えばもっとユーザビリティの高い動きも可能になります。たとえば「スクロールしたときだけヘッダーに背景色をつける」などです。

// script.js
window.addEventListener('scroll', function () {
  const header = document.querySelector('.site-header');
  if (window.scrollY > 50) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

CSSも以下のように追加します：

/* ヘッダーのスクロール時スタイル */
.site-header.scrolled {
  background-color: #222;
  transition: background-color 0.3s;
}

このスクリプトでは、ページを50px以上スクロールしたら.scrolledクラスがヘッダーに追加され、背景色が変わるようになります。ユーザーが「今どこまで見たか」を視覚的に理解しやすくなります。

スマホ対応のためのレスポンシブデザイン

現代のWebページではスマホ表示への対応も欠かせません。メディアクエリを使って、スマートフォンやタブレットでも使いやすいナビゲーションに調整しましょう。

@media (max-width: 600px) {
  .site-header {
    flex-direction: column;
    height: auto;
    align-items: flex-start;
    padding: 10px;
  }

  .site-header nav a {
    margin: 5px 0;
  }
}

このCSSでは、画面幅600px以下でレイアウトを縦方向に変え、リンク同士のスペースを適切に保ちます。タッチ操作の快適さも向上します。

注意点とトラブルシューティング

1. コンテンツが隠れる問題

position: fixedを使うと、後続の要素がヘッダーの下に隠れることがあります。これを防ぐには、main要素などに適切なpadding-topを入れてスペースを確保する必要があります。

2. z-indexの設定

他の要素がヘッダーの上に来てしまう場合は、z-indexを使って重なり順を調整しましょう。z-index: 1000以上ならまず安心です。

3. モバイルブラウザでの固定表示

iOSやAndroidブラウザでは、position: fixedの挙動が少し違うことがあります。特にソフトキーボードを使ったフォーム入力時に画面が乱れることがあるため、必要に応じてモバイル表示用にJSやCSSでの補正を検討しましょう。

おしゃれなUIへのステップアップ

基本の固定ヘッダーができたら、さらに魅力的にする工夫も試してみましょう。

スクロールに応じてヘッダーの高さを小さくする
フェードイン・アウトのアニメーションを入れる
メニューをハンバーガーアイコンにする（モバイル対応）

// スクロールでヘッダーのサイズを変更する例
window.addEventListener('scroll', () => {
  const header = document.querySelector('.site-header');
  header.style.height = window.scrollY > 100 ? '40px' : '60px';
});

ユーザーがストレスなく情報を得られるように、視認性・操作性のバランスを考えることが大切です。