Sticky Slider Navigation(Responsive)

JavaScript

スクロールでナビゲーションバーが移動する「Sticky Slider Navigation(Responsive)」

Sticky Slider Navigation(Responsive)は、スクロールすることでナビゲーションバーがスライド移動する機能を実装できます。セクションごとに現在表示されている位置をナビゲーションを見るだけで把握できるのでとても便利ですね。

ナビゲーションメニューはスクロールしても固定表示される

デモ

デモでは上部にES6、Flexbox、React、Angular、Otherと書かれたナビゲーションメニューが表示され、ページ読み込み時にはES6の下に横に引かれた青いバー(線)が表示されています。

このバーがスクロールしていくことで横へスライド移動していきます。例えば、Flexboxというセクションまでスクロールしていくと、ナビゲーションバーもFlexboxまで移動していきます。

現在表示されているセクションの位置が、このナビゲーションメニューに反映されるというわけです。

もちろんナビゲーションメニューはスクロールしても画面上部に固定表示されたままなので、いつでも瞬時に確認・アクセスできます。

またスクロールしてバーが移動するだけではなく、その逆に任意のナビゲーションメニューをクリックすることで、そのセクションまで自動スクロールで移動させることも可能です。

ランディングページなどの縦長ページにはとても役立つ機能になるのではないでしょうか?

というわけで、スクロールすることで各セクションに対応したナビゲーションメニューにバーがスライド移動する「Sticky Slider Navigation(Responsive)」の紹介でした。

Sticky Slider Navigation(Responsive)

no-imageFacebookのようなカルーセルスライダーを実装できる「jquery-carousel-slider」前のページ

画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」次のページimgViewer2

関連記事

  1. Tilt Hover Effects

    JavaScript

    ホバーによるチルトエフェクトを実装できる「Tilt Hover Effects」

    指定したアイテムにホバーすることでオシャレなチルトエフェクトを実装する…

  2. RV gallery-slider

    JavaScript

    軽量でタッチフレンドリーなギャラリースライダー「RV gallery-slider」

    RV gallery-sliderは軽量でタッチフレンドリーなギャラリ…

  3. bcralnit.js
  4. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  5. autoscroll.js

    JavaScript

    コンテンツを自動でスクロールしてくれるjQueryプラグイン「autoscroll.js」

    autoscroll.jsはwebページ内のコンテンツを自動でスクロー…

  6. jQuery fatNav

    JavaScript

    ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」

    jQuery fatNavはミニマルテイストなフルスクリーンのナビゲー…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP