ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。
各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします。
参考サイト
www.e-creators.net
「offset().top」と「scrollTop()」の違い
offset().topとは特定のHTML要素が配置されている座標を取得するのに使われるメソッドで、scrollTop()はスクロールした量を取得するメソッド
scrollTop
「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置までのピクセル数を取得します。
{ scrollTop: 0 }であればtopから0ピクセルの位置で停止、{ scrollTop:100}であればtopから100pxの位置で停止します。
$(window).scroll(function() { console.log($(this).scrollTop()); })
offsetメソッド
document内に配置した要素の位置を座標で取得できるメソッドになります。「top(Y座標)」と「left(X座標)」が取得出来ます
var Pos=$('#box').offset().top; console.log(Pos);
HTML部分
<header> <nav id="g-nav"> <ul> <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> </nav> </header> <div id="content01" class="box"> コンテンツ1 </div> <div id="content02" class="box"> コンテンツ2 </div> <div id="content03" class="box"> コンテンツ3 </div> <div id="content04" class="box"> コンテンツ4 </div>
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) { $("#list01").addClass('current').siblings('li').removeClass('current'); } else if(pos02 <= posScroll && posScroll < pos03) { $("#list02").addClass('current').siblings('li').removeClass('current'); } else if(pos03 <= posScroll && posScroll < pos04) { $("#list03").addClass('current').siblings('li').removeClass('current'); } else if(pos04 <= posScroll && posScroll) { $("#list04").addClass('current').siblings('li').removeClass('current'); } }); });