もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

CSSの「position: sticky」は非常に便利ですが、実務では「なぜか止まらない」「挙動がガタつく」といったトラブルが多発するプロパティでもあります。
実装時にハマりやすい、代表的な「壊れるパターン」を整理しました。

1. 親要素にoverflow: hiddenがある

これが最も多い原因です。sticky要素の親要素、またはその上の先祖要素のいずれかに、overflow: hidden, auto, scrollが設定されていると、stickyは機能しません。stickyは「直近のスクロールコンテナ」を基準に動きます。親にoverflowがあると、その親自体が（スクロールしていなくても）コンテナと見なされ、ブラウザが固定範囲を見失います。
対策としては、親要素のoverflow設定を解除するか、display: clip（比較的新しいブラウザ向け）を検討します。

2. 親要素の高さを使い切っている

「ticky要素が動けるのは、「親要素の範囲内」だけです。

親要素（コンテナ）とsticky要素の高さが同じ（例：サイドバーの親に1つのメニューしかない）場合、動くための余白がないため、固定されていないように見えます。
対策としては、親要素に十分な高さ（min-heightなど）があるか、あるいは隣のメインコンテンツ要素と同じ高さのコンテナに入っているかを確認してください。

3. align-items: stretch（Flexboxの影響）

親要素が display: flexの場合、デフォルトで子要素の高さが親いっぱいに引き伸ばされます。
パターン2と同様、要素が最初から親と同じ高さを持ってしまうため、スクロールする隙間がなくなります。
対策としては、stickyにしたい要素自体に align-self: flex-start;を指定して、必要以上に高さが広がらないようにします。

4. 記述漏れ（topや leftがない）

position: sticky;を書くだけでは機能しません。どこで止まるかの基準（top: 0;など）が必要です。
対策としては、必ず top, bottom, left, rightのいずれかを併記してください。

5. <thead>や <tr>への指定

テーブル内で stickyを使う際、ブラウザによって挙動が不安定になることがあります。
tr要素に直接stickyを指定しても効かないブラウザがあります。
対策としてはtrではなく、その中の thや tdに対して stickyを指定するのが実務上の鉄則です。

チェックリスト：動かないときのチェックポイント