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

Sticky positioning

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

配置スクロール

概要

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

対応ブラウザ

デスクトップ

Chrome 56+
Edge 16+
Safari 13+
Firefox 59+

モバイル

Chrome Android 56+
Safari iOS 13+
Firefox Android 59+

基本構文

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

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

実務での使いどころ

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

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

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

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

注意点

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

アクセシビリティ

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

参考リンク