サイト制作
CSSのstickyが止まらないとき 位置の指定とスクロールする親を確認
2026-11-07
この記事には広告・アフィリエイトリンクが含まれます。
追従する見出しなどに使うpositionのsticky。指定を増やす前に、止まる位置と親要素のスクロール条件を整理しましょう。
止まる位置も指定する
スクロールすると見出しが上端で止まる表示は、positionのstickyで作れます。ただし、stickyを指定するだけでは、どの位置で追従を始めるかが決まりません。縦方向ならtopなど、対象の軸の位置指定も確認します。
たとえば上端から少し下で止めたい場合は、その距離を指定します。上下の位置指定がどちらもautoのままなら、その軸では通常の相対配置のように振る舞います。
画面全体が基準とは限らない
stickyは、スクロールの仕組みを持つ直近の祖先の影響を受けます。親やその上の要素にoverflowが指定されていると、思っていたページ全体とは別の範囲を基準にしていることがあります。
また、stickyは配置されている範囲の制約を受けます。親が短くて移動できる余地がほとんどない場合、期待した長さだけ追従しないこともあります。常に画面へ固定するfixedと同じ仕組みだと考えない方が、調べやすくなります。
小さな例から条件を戻していく
まず、十分にスクロールする単純な親の中で、位置指定を付けた見出しを確かめます。そこで動くなら、実際の画面の親要素やoverflow、各部品の高さを順に見直します。
最後に文字を拡大した状態も確認しましょう。追従する要素が大きくなって本文を覆うと、便利さより読みにくさが勝ってしまいます。止まるかどうかに加え、内容を隠さないかまで見るのが大切です。
