1ページ完結で縦長のスクロールするサイトでよく使われている、スクロールしてもナビゲーションをページ内に残して各コンテンツにスムーススクロールするjQueryプラグイン「smint」というのがシンプルで使い勝手がよさそうだったんですが、ちょっと気になった箇所があったので修正してみました。
smintのサイトのデモを見てのとおり、ページをスクロールしてもナビゲーションはページ内に残ってユーザービリティを向上するスクリプトです。
スクリプトもシンプルで導入も簡単なんですが、メニューのidをキーにしてリンク先のclassを指定するというのがちょっと使い勝手がわるそうだったので、スタンダード（自分好み？）に各コンテンツ指定したidをキーにメニューからハッシュで飛ばすようにしました。
導入方法はほぼ同じでcssとjQueryとsmint.jsを読み込んで、固定配置したいナビゲーションのidに対してsmintを実行させるだけです。詳しくはsmint（How do I use it?）の導入方法を参考にして下さい。
ハッシュ指定にした以外に、よりシンプルにタグを減らしたり、リサイズにも対応してiOSとAndroidでも表示が崩れないように調整してあります。
zipでまとめておいたので気になった方はご自由にダウンロードして下さい。
2014/07/16 追記—————————————————————————-
コメントから要望を頂いたので本家に合わせてコンテンツ位置に合わせてメニューも切り替わるようにしました。（上のDEMOから確認できます）
メニューのidに”nav_”+リンク先を指定する事で連携されるようになってます。
ただ元のSMINTのメニューとコンテンツとの連携で不具合（ページの一番上からでないと正常動作しないなど）があるので、ちょっと実用には微妙な所です。
自分も普段はSMINTを使わずjQueryで直書きしてメニューとナビゲーションの連携にはwaypoint.jsを使っています。
なので自己責任で参考程度に利用して頂けると幸いです。
改良版をダウンロードしたい方は以下からダウンロードして下さい。
時間がある時にでも同機能のをちゃんと作りなおそうかと思います。
しかし一年前でもなんでこんな風に？と思う所が結構ありますなぁ。
コメントを残す