この記事の要点

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

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

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

チェック項目	確認方法	修正
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 が無効になります。スクロールコンテナが別になり、ビューポートに対するスクロールを観測できないためです:

  
  
    

      サイドバー（動かない）
    
  

罠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 等）。