追随するサイドバーを実装するjQueryコード

スクロールにあわせてサイドバーを追随させたい場合のjQueryのコードを紹介します。
ライブラリもあるので、コードを書くのがめんどうな人はそちらを使用してもいいかもしれません。

jQueryライブラリ
jQuery Ex Flex Fixed

jQueryコード

仮にjquery.follow.jsと名前をつけて保存

$(function(){
	var obj = $("#side");
	var offset = $(obj).offset();
	var topPadding = 20;
	$(window).scroll(function() {
		if ($(window).scrollTop() > offset.top) {
			$(obj).stop().animate({
				duration: 'fast',
				marginTop: $(window).scrollTop() - offset.top + topPadding
			});
		} else {
			$(obj).stop().animate({
				marginTop: 0
			});
		}
	});
});

2行目[obj]は追従させる要素のIDを指定します。例：#side
4行目[topPadding]は追従させる要素の位置調整を行います。例：20
8行目[duration]は要素が動くスピードを指定します。例：fast

HTML

head内

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.follow.js"></script>

※この時、CSSをjQueryより先に読み込んでおかないと動かないので注意

body内

<div id="content">
	<div id="side">サイドバー</div>
</div>

CSS

#content {
	position: relative;
}
#side {
	position: absolute;
	top: 20px;
	left: 0;
	width: 200px;
}

サンプルデモ

追随するサイドバーのデモ