かえラボBlog

かえラボBlogはラナデザインアソシエイツのテクニカルチームが運営する技術系ラボプロジェクトです

RaNa design associates, inc.

2011年6月14日 18:38

フローティングなナビゲーションを作る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"
	});

コメント(2)

こんにちは。興味深く拝見させていただきました。

サンプル デモページの左側の文章は、#nav-1~#nav-4と
記載されておりますが、右側のフローティング部分の
見出しは、#nav-1、#nav-1、#nav-2、#nav-1となっており、
#nav-1が重複している(=#nav-3と#nav-4が無い)のでは
ないでしょうか。

ご指摘ありがとうございます!
確かに見出しが重複しておりましたので、修正致しました。

たすけあいジャパン
ラナデザインアソシエイツは、「助けあいジャパン」に協力しています。