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: hiddenやoverflow: 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制作に取り入れてみてください。