CSSでスクロールに合わせて追従させる方法

オシャレなブログではシェアボタンやナビゲーション、ブログタイトルなどを追従させている場合があります。一見難しそうなコンテンツの追従ですが実は「CSS」だけで、できてしまいます。

そこで今回はCSSだけでスクロールに合わせて追従させる方法を紹介します。

EdgeやIEではCSS自体に対応していませんが、jQueryを使うことで代用することが出来ます。 

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

追従させるHTML・CSS

HTML
<div class=“sticky”>
追従するコンテンツ
</div>

CSS
.sticky {
position: -webkit-sticky; /* safari対応 */
position: sticky;
top: 0; /* 上からの距離 */
}

クラス名を「sticky」にしているので、追従させたいコンテンツにクラス名をつければ使えます。コンテンツを下に固定させたい場合は、top:0;の部分をbottom:0;に変えるだけで反映されます。

また追従させた時に他のコンテンツの下に重なってしまう場合はz-index:9999;を加えることで対処できます。実際この記事ではブログタイトルを追従させていますが、z-indexなしだと他のコンテンツの下に隠れてしまっていたので、参考にしてみてください。

Edge・IEでは

冒頭で書いたとおり、このCSSコードはEdge・IEでは対応していません。そのためCSSの代わりにjQueryを使うことで追従させることが出来ます。

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