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

HTML/CSS

2017.05.16

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

サイドバーの追尾

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

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

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

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

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

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