こんにちは、マツザワです。
今回は画面内で追従し、特定位置でピタッと止まる動きの実装メモです
今まで主にIE対応のためjQueryを利用していましたが、これがcssでも再現可能になりました
それが「position:sticky」です
使い方は簡単、動かしたい親要素の中にある子要素に設定するだけ！
ただし、NG記述があります
それは親要素すべてに「overflow:hidden」がかかっていないことが条件です
旧サイトの改修など横幅スクロールをつぶしたり、背景拡張と相性が悪いのが欠点
個人的には、かゆいところに手が届かない仕様ですが新規作成なら対応可能かと思います
最近のサイトスピード競争事情ですと、少しでもjsを減らしたいこの頃
工夫して使いたいと思う
参考はこちら
