koblog

高校生のWEBデザインブログ

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では

sticky・ブラウザー対応

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

 

JS
<script src="js/stickyfill.min.js"></script>
<script> $('.sticky').Stickyfill(); </script>
サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる