フローティングなナビゲーションを作るjQueryプラグイン

fixedオプションを追加。

ナビゲーションなどのコンテンツをスクロールに追従させ、画面の上下に接着させるjQueryプラグイン。

どこかで見たような気がするのだが、どこで見たか思い出せない＆探してもすぐ出てこないので、作ってみた。

floater.js

サンプル デモ

使い方は簡単。
よくある感じで、動かしたい要素でfloaterメソッドを実行する。

	$(element).floater();

オプションは以下の通り。

• marginTop: 上の余白
• marginBottom: 下の余白
• agility: 0～1。0はナビが通り過ぎるまで待つ。1はナビの末端が出るとすぐ動きだす。
• speed: アニメーションにかける時間
• easing: イージング
• fixed: trueでposition: fixedに切り替え。初期値はfalse。

オプションを適用すると、こんな感じ。

	$("nav").floater({
		marginTop: 60,
		marginBottom: 80,
		wait: 0.75,
		speed: 800,
		easing: "easeInQuad"
	});