スクロール位置に応じてナジゲーションボタンにカレント表示をする

3-03

ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。
各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします。

参考サイト

www.e-creators.net

www.nagahama-kannon-house.jp

「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">
コンテンツ１
</div>
<div id="content02" class="box">
コンテンツ２
</div>
<div id="content03" class="box">
コンテンツ３
</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('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');
    }
  });
});

liginc.co.jp