jQueryでスクロールと連動したコンテンツナビゲーションを実装する
最終更新日: Update!!
まとめサイトなどでよく見かけるコンテンツの見出し項目に合わせたナビゲーションを実装していきます。ナビゲーションからコンテンツ位置までの移動はもちろん、スクロールした現在地に合わせてナビゲーションで確認できるようにします。
HTMLでページ内アンカーとナビゲーション部分を用意
まずは各コンテンツへのページ内アンカーが機能するようにしておきます。そして、それらのページ内アンカーに対応したナビゲーションをリストなどで作成しておきます。また初期設定としてナビゲーションの最初の項目には現在地を示すclassを充てておきます。 【HTML】※一部抜粋<!-- コンテンツ部分 --> <div id="content01"> </div> <div id="content02"> </div> <div id="content03"> </div> <div id="content04"> </div> <!-- ナビゲーション部分 --> <ul id="nav"> <li id="list01" class="current"><a href="#content01">コンテンツ1</a> </li> <li id="list02"><a href="#content02">コンテンツ2</a> </li> <li id="list03"><a href="#content03">コンテンツ3</a> </li> <li id="list04"><a href="#content04">コンテンツ4</a> </li> </ul>
jQueryでコンテンツ位置とスクロール量を計算
次にjQueryで各コンテンツの位置とスクロール量を計算し、ナビゲーションを機能させていきます。ウィンドウサイズによってコンテンツ位置が異なる場合もありますので、それに対応できるようなイベントに設定しておきます。$(window).on('load resize',function(){ var pos01 = 0; var pos02 = Math.round($("#content02").offset().top); var pos03 = Math.round($("#content03").offset().top); var pos04 = Math.round($("#content04").offset().top); $(window).on('load resize scroll',function(){ var posScroll = $(window).scrollTop(); if(pos01 <= posScroll && posScroll < pos02) { $("#nav li").removeClass('current'); $("#list01").addClass('current'); } else if(pos02 <= posScroll && posScroll < pos03) { $("#nav li").removeClass('current'); $("#list02").addClass('current'); } else if(pos03 <= posScroll && posScroll < pos04) { $("#nav li").removeClass('current'); $("#list03").addClass('current'); } else if(pos04 <= posScroll) { $("#nav li").removeClass('current'); $("#list04").addClass('current'); } }); });まずはそれぞれのコンテンツ位置を取得し変数に置き換えておきます。最初のコンテンツはページトップの場合は0になりますし、そうでない場合は他のコンテンツ同様、適宜コンテンツ位置を取得しておきます。 スクロールに合わせてスクロール量を取得し、それぞれのコンテンツ位置と比較しながら条件を設定していきます。そして対応するナビゲーションのリスト部分に現在地を示すclassを切り替えていくようにします。 今回の方法ですが、項目が多い場合にはコードが長くなってしまいますのでまた別のアプローチを考えた方が良さそうですが、手軽に実装したい場合などは十分活用できるかと思います。サンプルはこちらにありますのでご参考に!
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories