最後のセクションを無視するスクロールに基づくjQueryクラスの変更
-
25-10-2019 - |
質問
jQueryを使用して、ページのスクロールをガイドし、NAVアイテムの色を変更して、あなたがいるセクションに対応しています。すべてがうまく機能していますが、スクリプトはページの最後のセクションを無視しています(連絡先)。
これは主にStackの別の質問に基づいていますが、私は自分のニーズに合わせてコードを変更し、その後問題に遭遇しました。
テストサイト:http://dev4.dhut.ch/
HTML:
<nav>
<ul>
<li class="active"><a href="#music" title="Music">MUSIC</a></li>
<li><a href="#photos" title="Photos">PHOTOS</a></li>
<li><a href="#lyrics" title="Lyrics">LYRICS</a></li>
<li><a href="#news" title="News">NEWS</a></li>
<li><a href="#info" title="Info">INFO</a></li>
<li><a href='#contact' title="Contact">CONTACT</a></li>
</ul>
<span></span>
</nav>
JavaScript:
var $sections = $('section'),
$navs = $('nav > ul > li'),
topsArray = $sections.map(function(){
return $(this).position().top - 100;
}).get(),
len = topsArray.length,
currentIndex = 0,
getCurrent = function(top){
for(var i = 0; i < len; i++){
if(top > topsArray[i] && topsArray[i+1] && top < topsArray[i+1]){
return i;
}
}
};
$(document).scroll(function(e){
var scrollTop = $(this).scrollTop(),
checkIndex = getCurrent( scrollTop );
if( checkIndex !== currentIndex ){
currentIndex = checkIndex;
$navs.eq( currentIndex ).addClass('active').siblings('.active').removeClass('active');
}
});
解決
次の行は問題があるところだと思います。
if(top > topsArray[i] && topsArray[i+1] && top < topsArray[i+1]){
具体的には topsArray[i+1]
の最後の反復のために定義されていません i
. 。ページ全体の高さを含むトップサレイにもう1つの値をプッシュしてみてください。
topsArray = $sections.map(function(){
return $(this).position().top - 100;
}).get(),
topsArray.push(document.height);
所属していません StackOverflow