スクロールしてもついてくるナビゲーション

仕事で使ったので、メモ。

長〜いページをスクロールしても、
するっと動いてくっついてくるサイドナビゲーション。
フローティングメニュー、エレベーターメニュー、スクロールメニュー
などと呼ばれているみたいです。

jQueryを使っているサイトだったので、jQueryで探してみました。

最初に、
Open Source - Scroll Follow - The Kitchen @ Net Perspective
こちらのプラグインを使ってみたのですが、
jQueryのバージョンのせいか、うまく動きませんでした。

そこで、次はこちら。
Creating a Floating HTML Menu Using jQuery and CSS | Nettuts+
ちゃんと動きました。
…でもIEはダメだった。（ひとまずIEは保留！）


設置の仕方。

jQueryを読み込んで、
<script language="javascript" src="jquery.js"></script>

以下のソースを書く。
#floatMenu がフロートするDIVの名前です。
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>

IEどうするか考えなきゃ…