◀ 8.

CSS position:sticky でサイドバー固定（動かない時の罠 / IE 対応 / Tailwind / sticky-top）

▶
編集
この記事の要点
  • position: sticky は スクロール中は通常配置、閾値を超えると固定される CSS プロパティ
  • 必須セット: position: sticky + top: 0（または bottom/left/right のいずれか）を必ず両方指定
  • 動かない罠 No.1: 親要素のいずれかに overflow: hidden / auto / scroll があると無効化される
  • 動かない罠 No.2: 親要素に高さがなく、sticky 要素のスクロール余地がない（親 = sticky 要素のサイズ）
  • IE 非対応 → position: fixed でフォールバック、または JS で代替（stickybits 等）。Tailwind は sticky top-0

position: sticky の基本

CSS の position: sticky は、スクロール位置が閾値を超えると要素がその位置で固定される挙動を実現します。サイドバー、ヘッダー、テーブルヘッダー固定によく使われます。

.sidebar {
  position: sticky;  /* これだけではダメ */
  top: 0;            /* 必ず top/bottom/left/right のいずれかが必要 */
}

/* ヘッダー固定 */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

/* テーブルヘッダー固定 */
thead th {
  position: sticky;
  top: 0;
  background: #f0f0f0;
}

基本のレイアウト例（サイドバー固定）

<div class="container">
  <main class="content">
    <!-- 長い本文 -->
  </main>
  <aside class="sidebar">
    <!-- ナビゲーション -->
  </aside>
</div>

<style>
.container {
  display: flex;
  gap: 24px;
  align-items: flex-start;  /* これ重要！ */
}

.content {
  flex: 1;
}

.sidebar {
  width: 240px;
  position: sticky;
  top: 16px;       /* 上端から 16px 空ける */
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
</style>

動かないときのチェックリスト

チェック項目確認方法修正
top / bottom / left / right 未指定DevTools で値確認top: 0 を追加
親に overflow: hidden / auto / scroll親をたどって overflow を確認overflow を visible に
親の高さが sticky 要素と同じ親に高さ指定があるか親に align-items: flex-start や min-height
display: flex の影響親が flex で要素が伸びているalign-self: flex-start
z-index 不足固定後、他要素に隠れるz-index: 100 追加
テーブル thead で効かない古いブラウザ仕様th 個別に sticky 指定

罠1: 親要素の overflow

祖先要素のどこかに overflow: hidden / auto / scroll があると sticky が無効になります。スクロールコンテナが別になり、ビューポートに対するスクロールを観測できないためです:

<body>
  <div style="overflow: hidden;">  <!-- ← これが原因 -->
    <div class="sidebar"
         style="position: sticky; top: 0;">
      サイドバー（動かない）
    </div>
  </div>
</body>

<!-- 修正: overflow を消すか、別の方法で hidden 効果を得る -->

罠2: 親要素の高さ

flex レイアウトの場合、デフォルトで全ての子が同じ高さに伸びます。サイドバー自身の高さ = コンテナの高さ となり、スクロールしてもくっつく余地がない:

/* NG: サイドバーが本文と同じ高さに伸びる */
.container {
  display: flex;
}
.sidebar {
  position: sticky;
  top: 0;
  /* スクロールする余地がない */
}

/* OK: コンテナ側で子の伸びを抑制 */
.container {
  display: flex;
  align-items: flex-start;  /* これ */
}

/* または個別に */
.sidebar {
  align-self: flex-start;
  position: sticky;
  top: 0;
}

テーブルヘッダーの固定

<style>
.table-wrap {
  /* overflow を sticky の祖先に置かない！ */
  height: 400px;
  overflow-y: auto;  /* これがスクロールコンテナ */
}

.table-wrap th {
  position: sticky;
  top: 0;
  background: #f5f5f5;
  z-index: 1;
}

/* 左列も固定したいとき */
.table-wrap td:first-child,
.table-wrap th:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
}

/* 左上の交点 */
.table-wrap th:first-child {
  z-index: 3;
}
</style>

<div class="table-wrap">
  <table>
    <thead>
      <tr><th>項目</th><th>値1</th><th>値2</th></tr>
    </thead>
    <tbody><!-- 大量の行 --></tbody>
  </table>
</div>

scroll-margin と組み合わせる

sticky ヘッダーがあるとアンカーリンクで「ヘッダーの下に隠れる」問題が起きます。scroll-margin-top で解決:

header {
  position: sticky;
  top: 0;
  height: 60px;
}

/* アンカーで飛んだとき、ヘッダー高さぶん余白を取る */
h2[id] {
  scroll-margin-top: 80px;
}

html {
  scroll-behavior: smooth;  /* スクロールも滑らかに */
}

IE / 古いブラウザ対応

IE は完全非対応。Edge Legacy も限定的。フォールバックパターン:

.sidebar {
  /* IE 用フォールバック */
  position: fixed;
  top: 0;
  width: 240px;
}

/* sticky 対応ブラウザでは上書き */
@supports (position: sticky) {
  .sidebar {
    position: sticky;
    top: 0;
  }
}

JS でフォールバックするなら stickybits が定番。

Tailwind CSS

<!-- sticky top-0 で1行 -->
<aside class="sticky top-0 self-start w-64 max-h-screen overflow-y-auto">
  サイドバー
</aside>

<!-- 上から 4 (1rem) 開ける -->
<header class="sticky top-0 z-10 bg-white">
  ヘッダー
</header>

レスポンシブ

/* PC: 固定サイドバー */
.sidebar {
  position: sticky;
  top: 16px;
}

/* モバイル: sticky を解除 */
@media (max-width: 768px) {
  .sidebar {
    position: static;
  }
}

FAQ

Q: position: -webkit-sticky は今も必要？
A: 2017 年以降のブラウザでは不要。Safari 13 以降は position: sticky 単独で動きます。

Q: 親に overflow が必要だが sticky も使いたい
A: 構造を変える必要があります。sticky 要素を overflow コンテナの外に移動するか、内側でスクロールする設計に変更してください。

Q: 複数の sticky を縦に並べたい
A: それぞれに違う top を指定（1 個目 top: 0、2 個目 top: 60px 等）。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 文法、規則
  2. セレクタ
  3. プロパティ
  4. CSSで色を指定する方法（HEX / RGB / HSL / oklch）
  5. アニメーション
  6. ライブラリ
  7. 「display: flex」を用いて要素を横並びにする方法
  8. スクロールの際のサイドバー固定方法「position: sticky」
  9. 縦の中央寄せ
  10. CSSの変更が反映されない
  11. 画面サイズもしくはスマホの場合のCSS切り替え方法
  12. 一行で左、真ん中、右にそれぞれ要素を寄せる方法
  13. 左右の端にそれぞれ要素を寄せる方法
  14. Bootstrapで両サイドを固定して広告を表示させる方法
2026-06-11 07:07:02 爽健 634

人気ページ

最近更新/作成されたページ