当ブログの右側のサイドバーと下部のシェアボタンは、スクロールしても固定されて付いてくるようになってます。 これまでは、この手の仕組みはjQueryで実装してましたが、今回はCSS3で新たに追加された「position: sticky」を使って実装してみました。 position: stickyとはpositionプロパティの新しい値です。 「position: sticky」と位置(top, right, bottom, left)を指定して、固定したい要素が指定した位置にくると「fixed」のように振る舞い、それ以外だと「relative」になる、という感じです。 一応、以下に簡単なデモを作ってみました。 See the Pen position: sticky by miso (@misodtm) on CodePen. このブログでは下記のように指定してます。 HTML <div c
![【CSS】position: stickyでスクロールに追従する要素を作る | misoblog](https://cdn-ak-scissors.b.st-hatena.com/image/square/47a7438c5c7264200d6229ed85db3b0cbb4e2ae3/height=288;version=1;width=512/https%3A%2F%2Fwww.miso.blog%2Fwp-content%2Fuploads%2F2017%2F04%2Fposition-sticky.jpg)