スクロールと連動したメニューナビゲーションを実装（繰り返しができる構造にしたい）

jQueryでスクロールと連動したメニューナビゲーションを実装

スクロールをした時に画面位置に合わせて、対応するページ内リンクメニューがcurrentに切り替わる仕組みを作成しております。

現在のソースでしたら、#content01 - #content04と目的とするコンテンツが４つと決め打ちしております。静的なサイトでしたら、問題がないのですが、contentが何個も増えることを想定しております。

現在のjqueryだと#contentが増えることが無理でして、どのようにjs（jquery）を記述するべきか悩んでおります。どなたかご教授お願い致します。

ソースを記します。

該当のソースコード

html
1
2<!-- コンテンツ部分 -->
3<div id="content01">
4</div>
5<div id="content02">
6</div>
7<div id="content03">
8</div>
9<div id="content04">
10</div>
11
12<!-- ナビゲーション部分 -->
13<ul id="nav">
14  <li id="list01" class="current"><a href="#content01">コンテンツ1</a>
15  </li>
16  <li id="list02"><a href="#content02">コンテンツ2</a>
17  </li>
18  <li id="list03"><a href="#content03">コンテンツ3</a>
19  </li>
20  <li id="list04"><a href="#content04">コンテンツ4</a>
21  </li>
22</ul>

js
1$(window).on('load resize',function(){
2  var pos01 = 0;
3  var pos02 = Math.round($("#content02").offset().top);
4  var pos03 = Math.round($("#content03").offset().top);
5  var pos04 = Math.round($("#content04").offset().top);
6  $(window).on('load resize scroll',function(){
7    var posScroll = $(window).scrollTop();
8    if(pos01 <= posScroll && posScroll < pos02) {
9      $("#nav li").removeClass('current');
10      $("#list01").addClass('current');
11    } else if(pos02 <= posScroll && posScroll < pos03) {
12      $("#nav li").removeClass('current');
13      $("#list02").addClass('current');
14    } else if(pos03 <= posScroll && posScroll < pos04) {
15      $("#nav li").removeClass('current');
16      $("#list03").addClass('current');
17    } else if(pos04 <= posScroll) {
18      $("#nav li").removeClass('current');
19      $("#list04").addClass('current');
20    }
21  });
22});

行動規範の内容に同意します

回答1件

ベストアンサー

似たようなことをしたことがあるので、それをもとに作成してみました。

リンクからコンテンツを取得して配列に格納しておいて、それをループして位置確認してます。

js
1$(function () {
2    // ナビゲーションのリンク
3    var navLink = $('#nav li a');
4    if (!navLink[0]) {
5        return false;
6    };
7
8    // コンテンツを配列に格納
9    var contentsArr = new Array();
10    for (var i = 0; i < navLink.length; i++) {
11        // コンテンツを取得
12        var targetContents = $(navLink.eq(i).attr('href'));
13        // 配列に格納
14        contentsArr[i] = targetContents
15    };
16    //コンテンツ部分の次の要素(例えばフッターなど)を最終位置取得用に追加
17    contentsArr[i] = $('footer');
18
19    // 現在地をチェックする
20    function currentCheck() {
21        navLink.removeClass('current');
22        // 現在のスクロール位置を取得
23        var windowScrolltop = $(window).scrollTop();
24        for (var i = 0; i < contentsArr.length - 1; i++) {
25            // 現在のスクロール位置が、見出しと次の見出しの間にあるものを調べる
26            if (contentsArr[i].offset().top <= windowScrolltop && contentsArr[i + 1].offset().top > windowScrolltop) {
27                //ナビゲーションにclass="current"をつける
28                navLink.eq(i).addClass('current');
29                break;
30            }
31        };
32    }
33
34    // ページ読み込み時とスクロール時とリサイズ時に、現在地をチェックする
35    $(window).on('load scroll resize', function () {
36        currentCheck();
37    });
38
39});