スクロールしても追従してくるメニュー（jQuery）

web designing（以降、webdes）の09年8月号より、自分でコピペできるようにメモ。
webdesではjQueryの特集が組んであり、これは私も将来使うのではないかと思う項目がたくさんあった。

ちなみに追従するメニューのことを、プロはフローティングメニューというらしい。
さっそくwebdesのコードをさらしてみる。
別途jQueryはダウンロードする必要があるのであしからず。

ヘッダーにcssとjQueryを読み込む

[html]
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/livefloatingmenu.js"></script>
[/html]

コンテンツとメニュー

[html]
<div id="contents">
<h1>フローティングメニュー</h1>
<p>ほげコンテンツ</p>
</div>
<div id="menu">
<h2>メニュー</h2>
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
</div>
[/html]

JS：livefloatingmenu.js

[js]
var name = &amp;quot;#menu&amp;quot;;
var menuYloc = null;
$(function(){
menuYloc = parseInt($(name).css(&amp;quot;top&amp;quot;).substring(0,$(name).css(&amp;quot;top&amp;quot;).indexOf(&amp;quot;px&amp;quot;)));
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+&amp;quot;px&amp;quot;;
$(name).animate({top:offset},{
duration:350,
queue: false
});
});
});
[/js]
durationの数値を変えることで、追従するタイミングを変更できる。
また、queueをtrueに変更すると良くわからん動きをする。

今回のサンプルはコチラ。