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

ブラウザのスクロールについてくるサイドメニューを見かけますよね。
今回、ある案件でjQueryを使ってそれを実装する機会がありました。複数サイトからのスクリプトダウンロードなど、少し煩雑だったのでメモを残しておきます。

まず、必要なライブラリをダウンロードします。

「jQuery 1.3.2」を以下の公式サイトからダウンロードします。
http://jquery.com/

「jQuery UI Core 1.7.2」を以下の公式サイトからダウンロードします。
http://jqueryui.com/

ダウンロードしたファイルにはいくつものjsを含んでいると思いますが、使用するのは「ui.core.js」のみです。

「jQuery Scroll Follow 0.4.0」を以下のサイトからダウンロードします。
http://kitchen.net-perspective.com/open-source/scroll-follow/

バージョンは絶対ではないので、他のバージョンでも動作すると思います。ただ、今回の実装には上記のバージョンで動作を確認しました。

次に、該当のhtmlファイルで、ダウンロードしたjsファイルを読み込みます。その下に、ついてくるメニューの要素をjQueryで指定します。例えば以下の例では、「id=”Side”」を指定した要素をスクロールについてこさせます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/jquery.scrollfollow.js"></script>
<script type="text/javascript">
$( document ).ready( function (){ $('#Side').scrollFollow();		});
</script>

基本的にはこれで完了です。

その他にオプションを指定することもできます。例えば、以下のようにすればメニュー要素がスクロールについて移動しても、ブラウザの枠からの位置をキープすることができます。

<script type="text/javascript">
$( document ).ready( function (){ $('#Side').scrollFollow({	offset: 50	});		});
</script>

その他にもいろいろとオプションを指定できますが、詳細は公式サイトなどを参照してください。

ここで、基本的にはこれで問題ないはずですが、私の場合は動きませんでした。少し調べてみたところ、「id=”Side”」にpositioinの指定を追加することで解決しました。

#Side{
	float: left;
	position: relative;
	width:200px;
}

floatを指定していたからでしょうか。コーディングの条件に応じては、若干の調整は必要なようです。