追従ヘッダー：CSSのposition: stickyとスクロールで隠す方法
追従ヘッダーガイド
追従ヘッダーのCSS：position sticky、縮小、スクロールで隠す | We.Inc
position: stickyで追従ヘッダーを作り、縮小とスクロールで隠す動きを追加します。ライブデモ、scroll-marginによるアンカーのオフセット、z-indexの修正、小さなReactフックを紹介します。
ヘッダーにposition: stickyとtop: 0、さらに背景とz-indexを指定すると、ページをスクロールしても上部に固定されます。追従するのは親要素の中だけで、overflowが設定された祖先要素があると止まることがあります。スクロールで隠れるヘッダーにするには、スクロールのリスナーからtranslateYのクラスを切り替えます。
ヘッダーにおけるstickyとfixedの違い
- position: sticky
- position: fixed
- レイアウト内で場所を占める
- はい
- いいえ、bodyにパディングを追加します
- 固定の基準
- 最も近いスクロールする祖先要素
- ビューポート
- top: 0のようなインセットが必要
- はい、ないと相対配置のように動きます
- 通常は必要
追従ヘッダーはCSS 1行で済む、うまくいかなくなるまでは。ヘッダーが追従しない、アンカーリンクの移動先がヘッダーの下に隠れる、ドロップダウンがコンテンツの裏に回り込む、といった問題が起こります。このページでは、そのCSS 1行と、それぞれの失敗への対処を解説します。通常、縮小、非表示の各モードを切り替えられるライブのスクロールデモ付きです。
- デモのボックス内をスクロールします。実際のヘッダーがページに追従するのと同じように、ヘッダーはそのボックスに追従します。
- モードを縮小またはスクロールで隠すに切り替え、上下両方向にもう一度スクロールします。
- デモ内のセクションリンクをクリックすると、scroll-margin-topによって見出しがヘッダーに隠れないことを確認できます。
- 使いたいモードに合うCSSとフックをコピーします。
- stickyが効かない場合は、overflow: hidden、auto、scrollが設定された祖先要素を探しましょう。ヘッダーはページではなく、そのボックスに追従しています。
- sticky要素は親要素の外に出られません。ヘッダーはbodyの直下か、ページと同じ高さのラッパーの中に置きましょう。
- ヘッダーには不透明か、わずかに半透明の背景を付けましょう。そうしないとスクロール中にコンテンツが透けて見えます。
- htmlにヘッダーの高さと同じscroll-padding-topを設定すると、すべてのアンカーリンクやフォーカスされた要素がヘッダーの下で止まります。
- 視差効果を減らす設定を尊重しましょう。動きを減らしたい人には、スライドのアニメーションを省きます。
よくある質問
position: stickyが効かないのはなぜですか？
よくある原因は3つです。top: 0のようなインセットの値がない、親要素がヘッダーの直後で終わっていて追従する余地がない、またはvisible以外のoverflowを持つ祖先要素があり、それが追従の基準になっている、のいずれかです。この順番で確認しましょう。
ヘッダーはstickyとfixedのどちらにすべきですか？
stickyのほうがシンプルです。レイアウト内の位置を保つので、ページ上部でコンテンツがヘッダーの下に潜り込むことがありません。fixedはヘッダーを全画面のヒーローの上に重ねたい場合に便利ですが、その場合はページへのパディングを自分で追加します。
アンカーリンクの移動先が追従ヘッダーの下に隠れないようにするには？
スクロールするコンテナ（通常はhtml）に、ヘッダーの高さと同じscroll-padding-topを追加します。特定の移動先だけなら、見出し自体にscroll-margin-topを付ける方法もあります。
ドロップダウンがページのコンテンツの裏に表示されるのはなぜですか？
sticky配置はスタッキングコンテキストを作るので、ヘッダー内の要素はその中でしか重なり順を決められません。ドロップダウンではなくヘッダー自体に、後続のコンテンツより高い重なり順（例：z-index: 50）を付けましょう。
stickyの本当の仕組み
- sticky要素は最初は通常のフローにあります。スクロールでインセット（ヘッダーならtop: 0）を越えそうになると、その位置にとどまり、親要素の下端が来て押し出すまで保たれます。
- 追従の基準になるボックスは、スクロールの仕組みを持つ最も近い祖先要素で、overflow: hiddenもこれに含まれます。そのため、カルーセルをはみ出さないように追加したラッパーが、離れた場所にあるヘッダーを知らないうちに壊すことがあります。
下スクロールで隠し、上スクロールで表示
- 現在のスクロール位置を前回の位置と比べます。小さなしきい値を超えて下へ動いたらtransform: translateY(-100%)でヘッダーを隠し、少しでも上へ動いたら元に戻します。
- topや高さではなくtransformをアニメーションさせましょう。変形はレイアウトの再計算を起こしません。スクロールイベントはパッシブ指定で監視し、ブラウザーがハンドラーを待たないようにしましょう。
レイアウトを崩さずに縮小する
- 追従中にヘッダーの高さを変えると、その下のコンテンツが動いてしまいます。外側の高さは固定したまま、transform: scaleでロゴを縮めるか、すでに邪魔にならない位置にあるヘッダーの内側のパディングを減らしましょう。
- ヘッダーにdata-scrolledのようなデータ属性を付ければ、スタイルのルールはCSSに置いたまま、スクリプトを1行で済ませられます。
基本の追従ヘッダー
スクロールするページ内の追従ヘッダー
フレームをスクロールしてください。ヘッダーは上部にとどまり、scroll-padding-topのおかげでアンカーリンクの移動先がヘッダーの下で止まります。
下スクロールで隠し、上スクロールで表示
非表示状態と縮小状態のCSS
スクリプトはデータ属性を設定するだけです。見た目の変化はすべてCSSにあります。
Reactフック：useHideOnScroll
ヘッダーにデータ属性として展開できる2つの真偽値を返します。8pxのしきい値で小さなぶれを無視します。
追従ヘッダーの落とし穴
症状と対処法
- ヘッダーがスクロールで流れていく
- topの値がない
- top: 0を追加
- ヘッダーがスクロールで流れていく
- 祖先要素にoverflow: hiddenがある
- overflowをより小さなラッパーに移すか、overflow: clipを使う
- 追従するが途中で離れる
- 親要素が短い
- ヘッダーをbodyか全高のラッパーに置く
- アンカー先の見出しが隠れる
- スクロールのオフセットがない
- htmlにscroll-padding-top
- メニューがコンテンツの裏に回る
- ヘッダーのスタッキングコンテキストが低い
- ヘッダー自体にz-index
- コンテンツが透けて見える
- 背景が透明
- ヘッダーに背景色を付ける
通常の追従
縮小
スクロールで隠す
ライブスクロールデモ
通常、縮小、スクロールで隠すを切り替えてから、ボックス内をスクロールしてください。
ヘッダーのモード
スクロールできるデモページ
ブランド
下にスクロールしてから、少し上に戻してください。
ヘッダーの状態：表示
ヘッダーの状態：表示、スクロール済み
ヘッダーの状態：非表示
ヘッダーの状態：非表示、スクロール済み
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る