※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’) です。
とりあえずテキトーに確認した限りは動いてるっぽいですが、バグ的なものも少なくないだろうし直さなきゃならない部分や追加したい部分がまだまだあるので、折を見て更新予定。
すみません(;;)
Webデザイナー初心者なのですが、
こちらのナビゲーションを使わせて頂きたいのですが、
ナビが左側にくっつかないで、
メインコンテンツの中に収めて使う
プログラムの書き方教えてもらえないでしょうか(´;ω;`)
左右を可変にしたいので;
いろいろ混ぜてみたら挙動不審になってしまいました;
もしよかったら宜しくおねがいしますm(==)m
>> mina さん
お返事遅くなってごめんなさい。コメントありがとうございます。
こちらのプラグインは左右どちらかの端に配置する想定でしたので、ちょっとその仕様は難しいです…。
私が作ったものはないですが下記のプラグインでしたらminaさんのお望みの仕様を達成できるかもしれません。
お役に立てず申し訳ないです。
scrollNav.js
http://scrollnav.com/