追従する見出し
position: sticky
スクロールの途中で上に張りつき、次の見出しに押し出される。長い記事の現在地表示に。
AIへの頼み方
記事のセクション見出しを、そのセクションを読んでいる間だけ画面の上に張りつくようにしてください。position: sticky と top の指定を使い、親要素に overflow が付いていないか確認してください。見出しの背景は必ず塗ってください。
動くデモ
この項目のデモは自動では動きません。操作して確かめてください。
全画面で見る ↗最小コード
/* 見出しが「親の中にいる間だけ」上に張りつく */
.section-head {
position: sticky;
top: 0; /* ← どこで止まるか。これが無いと効かない */
z-index: 4;
background: #fff; /* ← 背景が透明だと下の内容が透けるので必ず塗る */
}
/* つまずきやすい点
1. 親のどこかに overflow: hidden / auto があると効かない
2. top（または bottom / left / right）の指定が必須
3. 止まる範囲は「親要素の中」まで。親が抜ければ一緒に流れる
4. ヘッダの下で止めたいなら top: 56px のように実寸を入れる */対応状況
定番 2026年08月時点で確認
Baseline widely available（newly 2019-09-19 / widely 2022-03-19）。
実案件でそのまま使える。
対応状況は自動更新していません。確認日より後の変化はこのページに反映されていない場合があります。
使いどころ／避けどころ
長い記事や表で「いま何を読んでいるか」を見せたいときに向く。セクション見出しが上で止まり、次の見出しに押し出されていくので、読み進めながら現在地が分かる。表の見出し行を固定するのも同じ書き方でできる。
固定ヘッダと違って、親要素の中でしか止まらないのがこの機能の性格になる。セクションを抜ければ一緒に流れていくので、画面が固定要素で埋まらない。
つまずくのはたいてい次の3つ。
top を書き忘れる。どこで止まるかを指定しないと、何も起きない。効かないときはまずここを見る。
親のどこかに overflow: hidden がある。祖先に1つでもあると効かなくなる。レイアウト崩れを抑えるために付けた overflow が原因、というのがいちばん多い。
背景を塗り忘れる。止まっている間、下の内容がその上を通る。背景が透明だと文字が重なって読めなくなる。
サイトのヘッダも固定しているなら、top: 0 ではなくヘッダの高さぶん下げる。画面の狭い端末では、固定するものが増えるほど読める面積が減るので、モバイルでは固定しないという選択も持っておく。