stickyが止まらない・動かないときは？スクロールする祖先とtopを確認しよう

position: stickyを付けたのに、見出しが止まらない。逆に、思った場所で止まらず、別の枠の中だけで動いてしまう。そんなときは、値を足す前に、どの範囲でスクロールしているかを確認しよう。

今回は、ページ全体ではなく、高さ220pxの小さなスクロール枠に見出しを置く。CSSの基本が分かる人向けに、topの指定と、通常の配置との差を試すよ。

stickyは通常の配置を保ちながら位置を調整する

.scroll-area {
  height: 220px;
  overflow: auto;
}
.label {
  position: sticky;
  top: 0;
}

通常の流れの中に置かれた要素が、スクロール位置に応じて位置を調整する。上方向のしきい値をtopで決めると、条件を満たす間、上端に残るように見える。

position: fixedで画面へ固定する指定とは異なる。stickyは、スクロールに関わる祖先や、その要素の包含ブロックの範囲に制約される。包含ブロックは、位置や大きさを計算するときの基準となる範囲だよ。

topがautoのままだと、期待した方向へ止まらない

stickyを付けるだけで、上下どちらへも自動的に貼り付くわけではない。貼り付かせたい軸で、topなどのしきい値を指定しよう。

この記事の作例は縦方向の比較で、top以外の上下のしきい値は指定しない。topをautoへ戻すと、縦方向では通常どおりスクロールする動きになる。

枠の中をスクロールして比べよう

1. 最初は「sticky・top:0」が選ばれている。
2. 作例の「枠を下へスクロール」を押す。枠の内部が120px進み、見出しは上端に残る。
3. 「sticky・topなし」に切り替える。スクロール位置はそのままで、見出しが枠の上へ流れる。
4. 「通常の配置」に切り替えても、見出しは固定されない。
5. 「先頭へ戻す」で枠内のスクロールを0に戻す。

Chromiumで、スクロール前後の見出しと枠の座標を測り、top:0では上端に残り、topなし・通常配置では上へ動くことを確認した。下の数値は、見出しの上端と枠の内側上端の差を示している。「最初から試す」でモードもスクロール位置も戻せるよ。

親のoverflowが、基準を変えることがある

MDNでは、overflowがhidden・scroll・autoなどでスクロールの仕組みを持つ最も近い祖先へstickyが結び付くことが説明されている。その祖先が、実際に利用者のスクロールしている場所とは限らない。

たとえば、外側のページを動かしているつもりでも、途中の親にoverflowの指定があると、想定と違う基準になることがある。sticky自身だけでなく、親から外側へスタイルをたどろう。

余白や高さにも動ける範囲が必要

要素が親と同じくらい高かったり、親の範囲が短かったりすると、貼り付いて動ける余地がほとんどない。要素の高さ、親の高さ、しきい値、overflowを順に確認しよう。

また、上端に残すことで本文や操作を隠していないか、狭い画面や拡大した表示でも見直してね。幅や余白の計算に迷ったら、box-sizingの幅の比較も役立つよ。