【jQuery】スクロール機能とナヴィゲーション機能が一体となった[ScrollMenu.js]は実用性バツグンです。2.0【jQuery】スクロール機能とナヴィゲーション機能が一体となった[ScrollMenu.js]は実用性バツグンです。ONZEhttps://on-ze.com/archives/2737HomeBlog【jQuery】スクロール機能とナヴィゲーション機能が一体となった[ScrollMenu.js]は実用性バツグンです。Google縦長のウェブデザインを構築する際に真っ先に導入を検討すべきjQueryプラグイン。それが[ScrollMenu.js]です。サンプルをご覧ください。[ScrollMenu.js]:実装サンプルページのスクロール量に合わせてナヴィゲーション部分もスクロールし、ページ内のどの部分が表示されているかも確認できます。各セクションの数がいくつあるのかも確認できるようになっています。実装は比較的簡単なので初心者の練習にも良いかもしれません。公式サイトからプラグイン一式をダウンロードしてきましょう。このとき「jquery.js」も同時に読み込んでおきます。jQueryのヴァージョンは「1.7」以上に対応しているようです。src="scrollmenu.js"></script></head>コンテンツ部分は以下のように作り込んでいきます。5</section></body>最後に[ScrollMenu.js]のセットアップです。今回のサンプルでは下記のコードを使用。公式サイトで紹介されていたものをそのまま流用しています。ScrollMenu(setupOption);オプションもいくつか用意されており、ナヴィゲーションの位置や表示・非表示などを設定できるようになっています。sectionClassmenuTypeappendToanimateOnScrollanimationDurationnativeScrollscrollbarVisiblescrollAnchorSpacinganchorSetup以上。単純に縦長のウェブサイトだけでなく、レスポンシヴ・デザインとの相性も良さそうなので、ぜひ導入を検討してみてください。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】ウィンドウ内に要素が表示されたときに処理を行う[jquery.inview]プラグイン。【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン[Isotope]の使い方。