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)

関連記事

  1. jsPanel3

    JavaScript

    多機能なフローティングパネルを実装できるjQueryプラグイン「jsPanel3」

    jsPanel3は、高度で多機能なフローティングパネル(ウィンドウ)を…

  2. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  3. zoomwall.js

    JavaScript

    高さを揃えたグリッドレイアウトのLightbox系イメージギャラリー「zoomwall.js」

    zoomwall.jsは高さを揃えたグリッドレイアウトを実装することが…

  4. JavaScript

    リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Split…

    リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQ…

  5. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  6. no-image

    JavaScript

    サラッとスライスで切り替わるスライダー実装「Slice Slider」

    Slice Sliderはサラッとスライスでシンプルに切り替わるスライ…

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP