【CSS】position: stickyでスクロールに追従する要素を作る

WEB 2017.04.21 2019.04.05

当ブログの右側のサイドバーと下部のシェアボタンは、スクロールしても固定されて付いてくるようになってます。
これまでは、この手の仕組みはjQueryで実装してましたが、今回はCSS3で新たに追加された「position: sticky」を使って実装してみました。

position: stickyとは

positionプロパティの新しい値です。
「position: sticky」と位置（top, right, bottom, left）を指定して、固定したい要素が指定した位置にくると「fixed」のように振る舞い、それ以外だと「relative」になる、という感じです。

一応、以下に簡単なデモを作ってみました。

このブログでは下記のように指定してます。


<div class=“sticky”>
〜追従する要素〜
</div>


.sticky {
    postion: -webkit-sticky;
    position: sticky;
    top: 0;
}

jQueryで実装するよりも、すごく簡単にできました。
親要素の中でのみ固定されるので、コンテンツが終わるところでちゃんとstickyが解除されるのも良いですね。
シェアボタンの部分は「bottom: 0;」にして、下部に固定されるようにしました。

残念ながら、MicrosoftのEdgeとIEが未対応です。
今のところ、EdgeやIEでこのブログを見られることがほぼない感じですし、Edge・IEではスクロールしてもstickyの要素が付いてこないだけで別に困らないかな、と思ったんですけど、せっかくなので対応しました。

「Stickyfill」というjQueryプラグインを下記のように読み込んで、Edge・IEでも要素が追従するようになりました。


<script src="js/stickyfill.min.js"></script>
<script>
$('.sticky').Stickyfill();
</script>

Edge・IEさえなければ完全にCSSのみで実装できるのに・・・

アリーヴェ・デルチ！

狩野祐東技術評論社 2017-02-22