スクロールしてもついてくるメニューをjQueryプラグインで作る
スクロールを簡単に取得実行できるjQuery Waypointsを使用して、スクロールしてもついてくるメニューを作れます。
via：Sticky Elements with jQuery Waypoints
使用方法
jQuery Waypointsからファイルをダウンロードします。
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="waypoints.js" type="text/javascript"></script>
<script>
$(function() {
$('#id名').waypoint(function(event, direction) {
$(this).parent().toggleClass('sticky', direction === "down");
event.stopPropagation();
});
});
</script>
上記を記述したら、idをメニューに振ります。
<ul id="id名">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
<li>Section 5</li>
</ul>
最後にスクロールイベントが発生した時用のCSSを記述します。
.sticky #id名 {
position:fixed;
top:0;
left:0;
}
スクロールしてもついてくるメニューをjQueryプラグインで作るサンプル
コメントする
記事作成：2011年3月 1日 10:20
