くまだどうも、くまだです。
よくあるstickyで追従させるときに使えそうな実装ネタ。
stickyとoverflow clip
stickyでサイドバーを追従させる、というのはよくあると思います。
See the Pen よくあるsticky by kuma0605 (@kuma0605) on CodePen.
stickyは便利ですが、いくつか条件がそろうと追従が効かなくなります。stickyが効かなくなる例としては、以下のようなものがあります。
- 親・祖先要素にoverflow: hiddenを指定している
- 高さの差がない
- ポジション指定がない
場合によっては、親、祖先要素にoverflow:hidden;を使いたい場合があります（例えば画面から背景画像をはみ出させたいとき）。しかし、親、祖先要素にoverflow:hidden;を指定してしまうと、stickyが効かなくなる、という悩ましい現象が発生します。
See the Pen よくあるsticky by kuma0605 (@kuma0605) on CodePen.
ここでoverflow:hidden;ではなく、overflow: clip;を使うと背景画像をoverflow:hidden;のようにしつつ、要素をstickyで追従させることができます。
See the Pen stickyが効かない by kuma0605 (@kuma0605) on CodePen.
ここまで読んでくださりありがとうございました。