Widely available YES。全主要ブラウザで安定サポート。JavaScript 不要の固定配置として推奨。

Sticky positioning

position: sticky は relative と fixed のハイブリッドで、通常のフローに従いつつスクロール位置が閾値を超えると固定される。従来 JavaScript で実装していた固定ヘッダーやサイドバーナビゲーションを CSS のみで実現できる。top, bottom, left, right で吸着位置を指定する。

配置スクロール

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.position.position_sticky_table_elements
56
16
59
8
56
8
CSS プロパティ
sticky
56
16
32
13
56
13
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • `border-collapse` が `collapse` に設定されている場合、テーブルのヘッダーに枠線が表示されません (バグ 1727594)。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)

基本構文

CSS 
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
}

/* Sticking the table header */
thead th {
  position: sticky;
  top: 0;
}

ライブデモ

sticky-header

Sticky positioning sticky-header demo.

プレビュー全画面表示

sticky-sidebar

Sticky positioning sticky-sidebar demo.

プレビュー全画面表示

sectionheadinglock

Sticky positioning sectionheadinglock demo.

プレビュー全画面表示

実務での使いどころ

  • 固定ヘッダー・ナビゲーション

    ページスクロール時にヘッダーが画面上部に固定され、常にナビゲーションにアクセスできる。

  • テーブルヘッダーの固定

    長いデータテーブルのヘッダー行を固定し、大量のデータをスクロールしてもカラム名が常に見える状態にする。

注意点

  • 親要素に overflow: hidden, auto, scroll が設定されていると sticky が機能しない場合がある。
  • sticky 要素の包含ブロック（親要素）の範囲外にはスクロールされないため、親のサイズに注意が必要。

アクセシビリティ

  • 固定ヘッダーがコンテンツを隠さないよう、十分な余白やスクロールマージンを確保する。scroll-padding-top の活用が推奨される。

参考リンク