Stickyヘッダーの作り方完全ガイド|HTML・CSS・JavaScriptでスクロール固定を実現しよう

Webサイトのナビゲーションやタイトル部分を、スクロールしても画面上部に常に表示させたい。
そんなときに便利なのが「Stickyヘッダー(スクロール固定ヘッダー)」です。
HTML・CSSだけで実装する方法、JavaScriptを使ってより柔軟に対応する方法の両方を解説します。
この記事では、実装の基本からレスポンシブ対応、実際の活用例までを丁寧に紹介します。
Web制作を行う方や、UI/UXにこだわる方にとって役立つ内容です。


HTMLとCSSだけで実装するStickyヘッダーの基本

Stickyヘッダーの最もシンプルな方法は、CSSのposition: stickyを使うことです。
まずはHTMLとCSSのみで、固定ヘッダーを実装する基本的なコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Stickyヘッダーのサンプル</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}

header {
position: sticky;
top: 0;
background-color: #333;
color: white;
padding: 15px;
z-index: 1000;
}

main {
padding: 20px;
}

section {
height: 1000px;
background-color: #f5f5f5;
margin-bottom: 20px;
}
</style>
</head>
<body>
<header>
<h1>Stickyヘッダー</h1>
</header>
<main>
<section>セクション1</section>
<section>セクション2</section>
<section>セクション3</section>
</main>
</body>
</html>

このコードで、header要素がスクロールしても画面上部に固定されます。


StickyとFixedの違いを理解しよう

Stickyと似たCSSプロパティにposition: fixedがあります。
それぞれの特徴を比較してみましょう。

プロパティ挙動
position: stickyスクロールに応じて要素が「くっつく」ように固定される(親要素内で有効)
position: fixed常に画面に固定される(親要素に関係なく表示される)

Stickyは「ある位置に達したときに固定される」動きが自然で、ナビゲーションに向いています。
ただし、親要素のoverflowプロパティに依存するため、表示されない場合は親要素のCSSを確認しましょう。


JavaScriptを使ってStickyヘッダーを強化する

スクロール量によってヘッダーの表示・非表示を切り替えたいときはJavaScriptを使います。
以下はスクロール量が100pxを超えたらヘッダーにクラスを追加する例です。

<script>
window.addEventListener("scroll", function () {
const header = document.querySelector("header");
if (window.scrollY > 100) {
header.classList.add("scrolled");
} else {
header.classList.remove("scrolled");
}
});
</script>

CSSで.scrolledクラスにスタイルを追加すれば、背景色を変更したり影を付けたりできます。

header.scrolled {
background-color: #222;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

スマホ対応のレスポンシブStickyヘッダー

スマートフォンでは画面サイズが小さく、ヘッダーが大きすぎると邪魔になります。
メディアクエリを使って、スマホ向けにはスタイルを調整しましょう。

@media (max-width: 600px) {
header {
padding: 10px;
font-size: 14px;
}
}

また、ハンバーガーメニューと組み合わせることで、スマホでも快適に使えるナビゲーションを作ることができます。


Stickyヘッダーがうまく表示されない時のチェックポイント

Stickyが効かない場合、以下の点をチェックしてください。

  • 親要素にoverflow: hiddenoverflow: autoが設定されていないか
  • position: stickyに対応していないブラウザで表示していないか(IE非対応)
  • topの指定がないとStickyは効かない
  • z-indexが足りなくて下に隠れている可能性

これらを確認すると、ほとんどのケースでStickyヘッダーは正常に動作します。


Stickyヘッダーを使ったデザイン例と応用

実際のサイトでは、Stickyヘッダーを下記のように活用できます。

  • ECサイトのカテゴリナビゲーション
  • 記事サイトのタイトルバー
  • 管理画面の操作パネル
  • ブログの上部メニュー

さらに、スクロール量に応じてヘッダーを小さくすることで、画面を有効活用するデザインも人気です。


Stickyヘッダーを実装するときのUX注意点

Stickyヘッダーは便利ですが、ユーザー体験に配慮する必要があります。

  • ヘッダーが大きすぎて本文を邪魔しないように
  • モバイル画面ではなるべくスリムに
  • ナビゲーションはシンプルに、必要なリンクに絞る
  • スクロールに反応するアニメーションは派手すぎないように

ユーザーがストレスなく使えるUIを心がけることで、Stickyヘッダーの効果はさらに高まります。


まとめ

Stickyヘッダーは、Webサイトの操作性を大きく向上させるテクニックです。
HTMLとCSSだけで簡単に実装でき、JavaScriptを加えればより洗練された動作も可能になります。
実装する際には、ブラウザ対応やUXへの配慮も忘れずに行いましょう。

Stickyヘッダーは「見やすさ」と「使いやすさ」を兼ね備えたデザインの基本。
ぜひ、自分のWeb制作に取り入れてみてください。

タイトルとURLをコピーしました