シンプルなやつです
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要素をつけてあげればいいかなと思います。