[jQuery] 単一ページのナビゲーション用プラグイン

※2012.03.11 : プラグインの不具合と記事の内容を少し修正しました。

全部1ページに収めちゃう系のサイトでもしかしたら使えるかもしれないjQueryプラグインを作ってみました。似たようなのが既にどこかにあるのかも知れませんが、僕は知らないのでいいのです。


Demo.1 – スクロール追従
Demo.2 – position:fixed
zipはこちら


li内にページ内リンクを記述したul要素に対してプラグインを呼び出す形で使用します(上記Demoのソース参照)。ulはbodyの直接の子でないとちゃんと動かないかも。

スクロールによりliに付与されるクラス名が変化します。クリックによって現在の位置から上昇するliは「spnav_state_up」、下降するliは「spnav_state_down」、そしてジャンプ先が現在表示中のliは「spnav_state_current」という感じで、常にいずれかのクラス名が付与されます。また、それとは別にマウスオーバー時には「spnav_state_hover」が付与され、マウスアウト時に消えます。

プラグイン呼び出し時の引数で設定できるオプションは以下を用意しています。

---

prefix  default: ‘spnav_’
状態により付与されるクラス名の接頭辞(「spnav_」の部分)を設定できます。

position  default: ‘left’
ナビゲーションの位置を’left’か’right’から選択できます。

fixed  default: false
ナビゲーションの位置を固定(position:fixed)にするかどうかを設定できます。

shift  default: 5
ジャンプ先の座標や、クラス名を判定する基準の位置を指定した分だけずらすことができます。
ジャンプ先がウインドウ上辺ピタピタはイヤ！という時などに。

topMargin  default: 0
ナビゲーション上辺からウインドウ上辺までのマージンです。

topSpace  default: 0
ナビゲーションの座標はここで設定した数値以下にはなりません。
ヘッダなどでページ上辺に領域を確保したい場合などに。

bottomMargin  default: 0
ナビゲーション下辺からウインドウ下辺までのマージンです。
ウインドウよりナビゲーションの高さが長い場合に有用になるかもしれません。

bottomSpace  default: 0
ナビゲーションはページ最下辺からここで設定した分の高さには入り込みません。
フッタなどでページ下辺に領域を確保したい場合などに。

sideMargin  default: 0
position:’left’なら左側、position:’right’なら右側のマージンに相当します。

scrollDuration  default: 500
クリック時スクロールアニメーションの継続時間をミリ秒で設定できます。

scrollEaseType  default: ‘swing’
クリック時スクロールアニメーションのイージングを設定できます。
‘swing’, ‘linear’以外はjQuery Easing Pluginを使うなどして下さい。

follow  default: true
ナビゲーションがスクロールに追従するかどうか。falseで追従しなくなります。

followDuration  default: 500
ナビゲーション追従アニメーションの継続時間をミリ秒で設定できます。

followDelay  default: 0
ナビゲーションはここで設定したミリ秒を経てから追従を始めます。

followEaseType  default: ‘swing’
ナビゲーション追従アニメーションのイージングを設定できます。
‘swing’, ‘linear’以外はjQuery Easing Pluginを使うなどして下さい。

onScrollFinished  default: function(){}
クリック時スクロールアニメーション完了後に呼ばれる関数を設定できます。
関数内のthisは $(‘現在表示中のli’) です。

onFollowFinished  default: function(){}
ナビゲーション追従アニメーション完了後に呼ばれる関数を設定できます。
関数内のthisは $(‘現在表示中のli’) です。

---

とりあえずテキトーに確認した限りは動いてるっぽいですが、バグ的なものも少なくないだろうし直さなきゃならない部分や追加したい部分がまだまだあるので、折を見て更新予定。