jQueryでブラウザスクロールに追従するサイドメニューを作る

jQueryでブラウザのスクロールに追従するサイドメニューを構築します。
以前にもこのネタに何度か触れましたが、だいぶ古い情報になってしまいました。

jQueryプラグイン「jQuery Scroll Follow」でスクロール追従メニューを作る

そこで、今回は私が最近活用している、jQueryベース、プラグインなしの手法を書き留めておきます。

スタイルを用意する

例えばスクロールに追従させたい要素のidがsidemenuの場合、以下のようなスタイルを用意します。

#sidemenu{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	overflow: hidden;
}
#sidemenu div{
	margin: 0;
}

ポイントとして、IE6では固定配置にpositionにfixedが使えないので、absoluteを利用して構築します。

javascriptを用意する

続いて、以下のjavascriptを追加します。

var offset = $(“#sidemenu div”).offset();
$(window).scroll(function(){
	If($(window).scrollTop() > offset.top){
		$(“#sidemenu div”).stop().animate({
			marginTop : $(window).scrollTop() - offset.top
		});
	}else{
		$(“#sidemenu div”).stop().animate({
			marginTop : 0
		});
	}
});

jsではブラウザのスクロールイベントに対して、スクロール位置と追従要素の位置を取得して、その差の分だけ追従要素をアニメーションで移動させています。

animateで操作するプロパティにtopやleftを指定すると、ブラウザの縦幅が狭い場合、追従要素がコンテンツ外にはみ出す現象が発生することがあります。つまり、フッタ以下に真っ白なスペースが生まれて、永遠に下にスクロールできるといったような事態になってしまいます。それを回避するために、親要素に「overflow hidden」、子の要素はmarginを指定してanimateでコントロールします。
もちろん同様の考え方であれば、他の構成でも問題ありません。

最後に、初期表示時はトップから100pxの位置に要素をセットしたいなどの場合は、sidemenuやdiv要素に「padding-top 100px」などを指定します。
そのほうがjsで計算しようとするよりもシンプル、かつ、バグのリスクも少ないです。