CSSのposition: sticky;は、ある要素をスクロールに追従させつつ、特定の位置で固定する便利なプロパティだ。しかし実際に使ってみると、「なぜか効かない」「動かない」というトラブルに遭遇することがある。その代表例が、親要素にoverflow: scroll;やoverflow: hidden;が設定されている場合だ。
stickyの挙動は、**スクロール可能な領域（scrolling container）**に依存している。つまり、親要素にoverflow: scroll;があると、その親が新しいスクロールコンテナとして扱われ、子要素のstickyはその内部だけで作用する。結果として、期待した「ページ全体に対しての固定」ではなく、「親要素内での固定」しか起こらない。さらに、親の高さやスクロール範囲が限定的な場合、実質的にstickyが機能しないように見えてしまう。
解決策としては、overflow: visible;を使って親要素をスクロールコンテナにしないか、stickyを適用したい要素をoverflowを持たない上位階層に移すことが一般的だ。
また、position: sticky;の動作を確認する際は、topなどのオフセット指定を忘れずに書く必要がある。
CSSレイアウトの世界では、コンテキストの影響が大きい。stickyが崩壊したときは、「親がスクロールコンテナになっていないか？」をまず疑ってみるとよい。