スクロールに合わせて、移動するメニュー:序

STEP1.とりあえず、スクロールに合わせて動くようにしてみる。

使ったライブラリ

html

<div id="wrap">
<div id="primaryNavigation" class="nav">
<p class="navigationTitle"><em>乱雑モックアップ</em></p>
<ul>
<li><a href="#anchor1">link1</a></li>
<li><a href="#anchor2">link2</a></li>
<li><a href="#anchor3">link3</a></li>
<li><a href="#anchor4">link4</a></li>
<li><a href="#anchor5">link5</a></li>
<li><a href="#anchor6">link6</a></li>
</ul>
</div>
<div id="main" class="article">
<h1>スクロールに合わせて、移動するメニュー(要素)</h1>
~略~
</div>
</div>

css

#wrap{
position:relative;
}

#primaryNavigation {
width:10em;
margin-left:1em;
position:absolute;
top:0;
left:0;/*これないとIE7が右にずれる*/
_margin-left:-12em;/*ie6が#mainのmarginに引きづられるバグの対処*/
}

<head>内に書いたjavascript

<script type="text/javascript">
$(window).scroll(function(){

var scrollTop=parseInt($(this).scrollTop());

$('#primaryNavigation').animate({top:scrollTop},{
duration:800,
queue:false,
easing:"easeOutCubic"
});
});
</script>
$(window).scroll(function(){
Scrollイベント、スクロールした際に呼び出される。
var scrollTop=parseInt($(this).scrollTop());
上下のスクロール位置が分かる
$('window').scrollTop();ってやってたらIE6が取得出来なかった。
$('#primaryNavigation').animate({top:scrollTop},{duration:800,queue:false,easing:"easeOutCubic"});
animate
duration:処理時間
queue:false これが無いとスクロールの度にふにゃふにゃ動く
easing:"easeOutCubic" / jquery.easing.1.3.jsを読み込んでいるので使える。
メモ /
初期状態で使えるeasingは2つ( linear / swing )だけらしい。
jquery.easing.1.3.jsを使うと
jswing / easeInQuad / easeOutQuad / easeInOutQuad / easeInCubic / easeOutCubic / easeInOutCubic / easeInQuart / easeOutQuart / easeInOutQuart / easeInQuint / easeOutQuint / easeInOutQuint / easeInSine / easeOutSine / easeInOutSine / easeInExpo / easeOutExpo / easeInOutExpo / easeInCirc / easeOutCirc / easeInOutCirc / easeInElastic / easeOutElastic / easeInOutElastic / easeInBack / easeOutBack / easeInOutBack / easeInBounce / easeOutBounce / easeInOutBounce
こんなに増える。