position:stickyのヘッダーが追従しないときの原因と直し方

stickyにはtopなどの閾値が必須

position:stickyは、top・bottom・left・rightのいずれかで「どこに張り付くか」を指定して初めて機能します。position:stickyだけ書いてtopを指定しないと、固定が発動せず通常の要素のように流れてしまいます。

上部に固定したいヘッダーならtop:0を付けます。これでスクロール位置が要素の元の位置を超えたときに、画面上端から0の位置に張り付きます。

stickyが効かないと感じたら、まずtop(または該当方向)が指定されているかを最初に確認してください。これだけで直るケースが少なくありません。

親のoverflowがstickyを無効化する

祖先要素のいずれかにoverflow:hidden、auto、scrollが指定されていると、stickyはその要素を基準にしようとし、結果として期待どおり追従しなくなることがよくあります。意図せず付いたoverflow:hiddenが原因の定番です。

対処は、sticky要素の祖先からスクロールを生まないoverflow指定を取り除くことです。横スクロール対策などで付けたoverflow-x:hiddenが、縦のstickyまで巻き込んでしまう例には特に注意が必要です。

開発者ツールで対象の祖先を順にたどり、overflowがvisible以外になっている要素がないかを確認すると原因が見つかります。

症状別チェック表

position:stickyのヘッダーが追従しないときは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

切り分けの手順

stickyが効かないときは、次の順で確認すると原因にたどり着きやすいです。

1. sticky要素にtop(または対応方向)が指定されているか確認する
2. 祖先要素にoverflow:hidden/auto/scrollが付いていないか順にたどる
3. stickyの基準となる親要素に十分な高さ(スクロール余地)があるか確認する
4. 親にheightやmax-heightの過剰な制限がないか確認する
5. display:flex/grid環境ではアイテムの伸長設定が高さを潰していないか見る

親の高さ不足で張り付く範囲がないケース

stickyはあくまで親要素の範囲内でのみ張り付きます。親の高さがヘッダーとほぼ同じだと、スクロールして張り付ける余地がなく、すぐに親の下端まで来て一緒に流れていきます。追従区間が短いのはこのためです。

セクションごとの見出しをstickyにする場合、各セクション(親)の高さが十分にあれば、そのセクションを見ている間だけ見出しが張り付きます。意図した区間で固定されるよう、親の範囲を意識して設計します。

ページ全体で固定し続けたいヘッダーは、bodyや十分に高いラッパーを親にすることで、スクロール全域にわたって張り付かせられます。

スクロール挙動を実機で共有確認する

stickyの追従はスクロールしてみないと分からず、親子構造やoverflowの影響も実機で確認するのが確実です。修正前後のページを並べ、どの親のoverflowが原因かを示すと共有がスムーズになります。

検証用のHTMLを相手のブラウザですぐ試してもらいたいときは、ギガサイト便にドロップして発行される共有URLが便利です。スマホ実機でもQRコードからすぐ開けてスクロールを試せ、URLのまま中身を差し替えられるので調整を繰り返せます。レビューが終われば公開期限で自動的に閉じられ、関係者以外に見せたくない場合は認証も併用できます。