---
title: "position:stickyのヘッダーが追従しないときの原因と直し方"
description: "position:stickyをヘッダーに付けてもスクロールで固定されず流れてしまうと困っている方向け。topの未指定・親要素のoverflow設定・親の高さ不足という典型原因を手順で切り分けられます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/sticky-header-not-sticking"
markdown: "https://giga-site.com/articles/sticky-header-not-sticking/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# position:stickyのヘッダーが追従しないときの原因と直し方

ヘッダーにposition:stickyを付けたのにスクロールしても固定されず、普通に流れていってしまう。原因の多くはtopの未指定、親要素のoverflow設定、そして親の高さ不足です。この記事ではstickyが効かない典型を切り分けて直す方法をまとめます。

> Source HTML: https://giga-site.com/articles/sticky-header-not-sticking
> Article index: https://giga-site.com/articles/index.md

## 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のまま中身を差し替えられるので調整を繰り返せます。レビューが終われば公開期限で自動的に閉じられ、関係者以外に見せたくない場合は認証も併用できます。

## よくある質問

### position:stickyにしたのに固定されません

top(または対応する方向)を指定していない可能性が高いです。上部固定ならtop:0を付けてください。それでも効かない場合は祖先のoverflowを確認します。

### 親のoverflowはなぜstickyを壊すのですか

overflow:hidden/auto/scrollを持つ祖先があると、stickyはその要素を基準にしようとし、期待した追従が起きなくなります。横スクロール対策のoverflow-x:hiddenにも注意が必要です。

### 少しスクロールするとヘッダーが流れていきます

stickyは親の範囲内でのみ張り付きます。親の高さが足りないと追従区間が短くなるため、固定したい区間に応じて親の高さや範囲を設計してください。

### stickyとfixedはどう違いますか

fixedは常に画面に対して固定され続けます。stickyは通常配置と固定の中間で、スクロールが閾値に達するまでは普通に流れ、達した後だけ親の範囲内で固定されます。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [ページ内リンクでスクロール位置がずれるときの対処](https://giga-site.com/articles/scroll-position-not-restored/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)
- [外部CDNのCSS・JSが読み込めないときの対処](https://giga-site.com/articles/external-cdn-not-loading/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "position:stickyのヘッダーが追従しないときの原因と直し方",
  "description": "position:stickyをヘッダーに付けてもスクロールで固定されず流れてしまうと困っている方向け。topの未指定・親要素のoverflow設定・親の高さ不足という典型原因を手順で切り分けられます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/sticky-header-not-sticking",
  "url": "https://giga-site.com/articles/sticky-header-not-sticking",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "position:stickyにしたのに固定されません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "top(または対応する方向)を指定していない可能性が高いです。上部固定ならtop:0を付けてください。それでも効かない場合は祖先のoverflowを確認します。"
      }
    },
    {
      "@type": "Question",
      "name": "親のoverflowはなぜstickyを壊すのですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "overflow:hidden/auto/scrollを持つ祖先があると、stickyはその要素を基準にしようとし、期待した追従が起きなくなります。横スクロール対策のoverflow-x:hiddenにも注意が必要です。"
      }
    },
    {
      "@type": "Question",
      "name": "少しスクロールするとヘッダーが流れていきます",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "stickyは親の範囲内でのみ張り付きます。親の高さが足りないと追従区間が短くなるため、固定したい区間に応じて親の高さや範囲を設計してください。"
      }
    },
    {
      "@type": "Question",
      "name": "stickyとfixedはどう違いますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "fixedは常に画面に対して固定され続けます。stickyは通常配置と固定の中間で、スクロールが閾値に達するまでは普通に流れ、達した後だけ親の範囲内で固定されます。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```