web関連

【css】「position:sticky;」で指定した要素をスクロールに追随させる

/
【css】「position:sticky;」で指定した要素をスクロールに追随させる

「position:sticky;」を使えば親要素内で子要素がスクロールに追随するとのことだったので試したときの備忘録

html

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

css

親要素（.wrap）には特に何も指定しなくてもおｋみたい

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

ie11で使う場合

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>
デモ

面白い使い方していたのでメモ

「position: sticky;」を使ってデモ2みたいな事ができるの知らなかったからメモ

デモ2

2020年8月17日追記；親要素にoverflowが指定してあると動かなかった

サイドバーとかの要素に使おうとしたら上手く動かなくて原因の方を色々調べていたら親の親要素にoverflow:hidden;がかかっていたのが原因だった

注意

Link：position: sticky;の仕組みや実際の使い方をやさしく解説
Link：css position stickyが効かない時の解決策！Flex-box使用時に効かなくなる？
Link：CSS position: stickyが効かない原因と解決方法
親要素に横スクロール対策でoverflow:hidden;を指定する癖があったんだけど今回みたいに予期しない事態が起こるわけだし指定するの辞めようかな

思っていた以上に便利なcssで驚いた

Pocket はてぶ