スクロールしてもついてくるメニューをjQueryプラグインで作る

スクロールを簡単に取得実行できるjQuery Waypointsを使用して、スクロールしてもついてくるメニューを作れます。
via:Sticky Elements with jQuery Waypoints

sponsors

使用方法

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;
}

サンプル

どんどん下にスクロールしてみてください。



































































































Javascriptサンプルページ一覧
skuare.net

sponsors