ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。
各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします。
参考サイト
www.e-creators.net
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'); } }); });
コメント