読者です 読者をやめる 読者になる 読者になる

jQeuryでスクロールに追従するサイドバーを作る方法

f:id:rankasan:20170322142246p:plain

スクロールを勧めても、サイドバーの一部が追従してついてくるサイト結構ありますよね。あれをjQueryで実現する方法です。はてなの最新記事等、サイドバーの高さが非同期で変わるケースにも対応しています

以下の記事は、はてなブログを対象にしていますが、コードは他のブログでも使えると思います

サンプルコード

5行目で追従させたい要素、6行目でその直前の要素を取得しています。7~24行がスクロールのイベントハンドラがメインのロジックになります

8~9行目でbodyの高さ、要素の位置最小・最大値をそれぞれ算出しています。11~23行目でスクロール位置が最大値を超えた場合、最小値を超えた場合、最小値以下の場合のそれぞれ対応するmargin-topを設定しています

サンプルでは注目記事を追従させていますが、3行目のセレクタを変更すれば別の要素を指定できます。参考までにセレクタのサンプルを示します

デザインによっては追従時の表示がズレるかもしれません。その場合は3~4行目にある、移動範囲のマージンを調整して下さい

導入方法

本コードは、サイドバーの最下部に配置された要素を追従する事を想定しています。追従したいモジュールを最下部に設定して下さい

次に最下部に設定した追従したい要素に合わせて、前述の通り5行目のセレクタを変更します

後はデザイン、カスタマイズからヘッダのタイトル下、もしくはフッタのどちらかにコードを記述すればOKです

f:id:rankasan:20170322152115p:plain

簡単ですね。ただし、Adsense、Amazonアソシエイトなど主だった広告会社は、広告の追従表示を禁止しています。その点には御注意ください

プライバシーポリシー