スクロールしてもついてくるナビゲーション
仕事で使ったので、メモ。
長〜いページをスクロールしても、
するっと動いてくっついてくるサイドナビゲーション。
フローティングメニュー、エレベーターメニュー、スクロールメニュー
などと呼ばれているみたいです。
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どうするか考えなきゃ…
投稿
