jQueryを使った一定以上スクロールすると上に固定される横メニュー

シンプルなやつです

HTML

</pre>
<div id="nav_box">
<ul id="nav">
 <li>hogehoge</li>
 <li>hogehoge</li>
 <li>hogehoge</li>
</ul>
</div>
<pre>

CSS

#nav_box{
 position: relative;
}
#nav{
 padding: 10px 0;
 overflow: hidden;//float回避
 position: absolute;
 z-index: 10000;
}
#nav li{
 float: left;
 padding-right: 10px;
}

javascript

var nav = $('#nav');//取得
var offset = nav .offset();//位置(topやleftの値)取得
 $(window).scroll(function () {//スクロールされた時
  if($(window).scrollTop() > offset.top) {//スクロールされた値と位置との比較してスクロールがリストの位置より下に来たら
   nav.css('top',$(window).scrollTop() - offset.top);//
スクロールされた値と位置の値を引いてCSSのtopの値にしている
 } else {//それ以外（スクロールがリストまできてない場合
 nav.css('top',0);
 }
});

解説

HTMLはぶっ飛ばして、CSSからイキます。やらしい意味です。
navをposition: absoluteにしているので外側のdivはposition: relative以上にしなければなりません。positionの関係性については、static,relative,absolute,fixedとありますが、親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
#nav liでfloatさせているのでoverflow: hiddenで解除しています。

javascriptはスクリプト内に記述しています。
今回はabsoluteなのでスクロール値とリストのwindowからの
距離を比較して引いてるところが味噌となります。
fixedの場合はaddcssでfixed要素をつけてあげればいいかなと思います。

Related articles