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>