まとめサイトなどでよく見かけるコンテンツの見出し項目に合わせたナビゲーションを実装していきます。ナビゲーションからコンテンツ位置までの移動はもちろん、スクロールした現在地に合わせてナビゲーションで確認できるようにします。  

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を切り替えていくようにします。   今回の方法ですが、項目が多い場合にはコードが長くなってしまいますのでまた別のアプローチを考えた方が良さそうですが、手軽に実装したい場合などは十分活用できるかと思います。サンプルはこちらにありますのでご参考に！