フローティングナビ〜付いてくるナビゲーション

縦長のページを作成するときに欲しい機能としてナビゲーションがどこまでも付いてくるものです。
簡単にできるfloater.jsのプラグインを活用した方法です。

floater.jsはMITライセンスですから、商用使用も可能ですし、再配布もできます。ただし、上部に書かれている「著作権表示」と「MITライセンスの全文」を記載したまま使用してください。

(function($) {
	$(function() {		
		$("#nav").floater({
		marginTop: 0,
                marginBottom: 0,
                wait: 0.5,  // 0-1
                speed: 1000,
                easing: "swing",
		});
		
	});
})(jQuery);

<div id="main">
<p>Lorem ipsum dolor.....</p>
</div>
<div id="nav">
	<ul class="menu">
	  <li><a href="#">メニューA</a></li>
	  <li><a href="#">メニューB</a></li>
	  <li><a href="#">メニューC</a></li>
	</ul>
</div>

スクリプトのオプションは以下のとおりです。
marginTop: 上の余白
marginBottom:　下の余白
wait: 0はナビが通り過ぎるまで待つ、1はナビの末端が出るとすぐに動きます
speed: アニメーションする時間
easing: イージング
fixed:trueでposition:fixedになります