【css】「position:sticky;」でサイドバナーなど指定した要素をスクロール追従させる

「position:sticky;」を使うと親要素内でスクロールした時、子要素を追従させることができる。主にサイドバーを追従させる時などに使用し、CSSのみでスクロール追従のバナーを作成できたりする。

「position:sticky;」の使用例

まずは、「position:sticky;」の使用例。

See the Pen
【css】「position:sticky;」で指定した要素をスクロールに追随させる by twotone (@twotone-me)
on CodePen.

書き方としては以下のように使用する。

<div class="wrap">
	この中で.stickyがスクロールするとついてくる
	<div class="sticky">
		スクロールに合わせてついてくる
	</div>
</div>

.sticky{
    /*ベンダープレフィックス指定しとかないとスマホで動かんかった*/
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

以下、jQueryを使って再現してみた。

「position:sticky;」でパララックス表現

「position:sticky;」を使ってCSSのみでパララックスを表現できる。

See the Pen
【css】「position:sticky;」で指定した要素をスクロールに追随させる（応用） by twotone (@twotone-me)
on CodePen.

以下、jQueryを使って再現してみた。

【注意】親要素に「overflow:hidden;」が指定してあると動かない

「position:sticky;」が上手くいかない時、親要素に「overflow:hidden;」が設定されていると正常に動作しないので、親要素を遡って確認する必要アリ。

どうしても、「overflow:hidden;」を解除できない時は、jQueryを使っての実装する場合は以下リンク参考。

「ie11」で使う場合は「Polyfill」が必要

ie11では「position:sticky;」はサポートしていないのでieでも使いたいならCDNの「stickyfill.js」を読み込む必要がある。

<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.js"></script>
<script>
    var elem = document.querySelectorAll('.sticky');
    Stickyfill.add(elem);
</script>