過去バージョン

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;
}

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

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

罠1: 親要素の overflow

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

  
  
    

      サイドバー（動かない）
    
  

罠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;
}

テーブルヘッダーの固定

  

    

      
項目
値1
値2
    
    

  

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

  ヘッダー

レスポンシブ

/* 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 等）。