スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案(Working Draft)の段階 で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポート されています。 position: stickyの仕様 ブラウザ・サポート状況(Can I use…) フィーチャー・クエリ(@supports) と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃいますよ」というデモからご紹介します。 面白い使い方 基本的な使い方だけでも便利なスティッキーですが、応用するとスクロール効果のような面白い使い方ができます。以
![position: stickyの面白い使い方と使用時の注意点](https://cdn-ak-scissors.b.st-hatena.com/image/square/6194775cbc7faf28b9c94c147c665221f1c1eceb/height=288;version=1;width=512/https%3A%2F%2Fparashuto.com%2Frriver%2Fwp%2Fwp-content%2Fuploads%2F2018%2F03%2Fsticky-way.png)