【jQuery】サイドバーを追尾させる方法

この記事では、JavascriptとjQueryを用いて、サイトをスクロールした時にサイドバーを固定追尾させる方法をソースコードつきで紹介します。

サイドバーの追尾

JavascriptとjQueryを用いると、サイトを追尾するサイドバーを簡単に作成できます。
サイドバーを追尾させることで、例えば人気記事一覧を掲載するとサイトの回遊率を上げたりすることができます。

■表示例:サンプルページ
※右サイドにあるプロフィール画面を追尾させています。

ソースコード

サンプルプログラムのソースコードです。

追尾している要素をフッターの真上で停止させています。

【使い方】
①var fixedTag = $(“.admin”);
ここで追尾させる要素を指定します。
(※サンプルでは、adminクラスの要素を指定)

②var footer = $(“.footer”);
ここでフッターの要素を指定します。
(※サンプルでは、footerクラスの要素を指定)

【関連記事】
HTML入門 サンプル集
CSS入門 サンプル集

シェア&フォローお願いします!