使用jQuery來更改依賴滾動位置的類時遇到問題

Question

一些非常有幫助的人編寫了腳本，然後修改腳本以在將頁面滾動到相關部分時更改導航項目上的類。這是原來的帖子：Use jQuery to change a class dependent on scroll position。

我的第一個問題是數組的最後一部分被忽略。其他人有這個問題，並提供了一個解決方案，這對他們有效，但不適合我：jQuery class change based on scroll ignoring last section。

第二個問題是，即使拋開我的數組中的最後一節沒有被選中，新的類名只會被添加到我的導航項中，但從未刪除，以便在我滾動到在頁面的底部，除了導航欄中最後一個項目以外的每個項目都已經「選擇」爲一個類。我非常感謝任何見解。這裏是我的代碼，這幾乎是相同的修改後的版本，但我使用的標題，而不是部分（這也許是顯著？）：

var $anchs = $('.content h1'); 
    var $navs = $('#zone-submenu div .content > .item-list > ul > li'); 

    topsArray = $anchs.map(function(){ 
     return $(this).position().top - 100; 
    }).get(), 
    topsArray.push(window.height); 

    var len = topsArray.length; 
    var currentIndex = 0; 

    var getCurrent = function(top) { // take the current top position, and see which 
     for(var i = 0; i < len; i++) { // index should be displayed 
      if(top > topsArray[i] && topsArray[i+1] && top < topsArray[i+1]) { 
       return i; 
      } 
     } 
    }; 
    $(document).scroll(function(e) { 
     var scrollTop = $(this).scrollTop(); 
     var checkIndex = getCurrent(scrollTop); 
     if(checkIndex !== currentIndex) { 
      currentIndex = checkIndex; 
      $navs.eq(currentIndex).addClass("selected").siblings(".selected").removeClass(".selected"); 
     } 
    }); 

恐怕我不能發佈網站本身 - 它正在發展中，我無法在它上線之前揭示它。儘管感謝您的幫助！

Answer 1

這看起來有點奇怪：

currentIndex = checkIndex; 
$navs.eq(currentIndex).addClass("selected").siblings(".selected").removeClass(".selected"); 

從我可以在你的代碼告訴，它應該是：

$navs.eq(currentIndex).removeClass('selected'); // no dot 
currentIndex = checkIndex; 
$navs.eq(currentIndex).addClass("selected"); 

修訂 修復了「不顯示最後一個索引項「...

您正在引用getCurrent函數中的無效數組元素 - [i + 1]是inval id當我== len-1。如果發生這種情況，您只需返回最後一個元素。

var getCurrent = function(top) { // take the current top position, and see which 
    for(var i = 0; i < len-1; i++) { // index should be displayed 
     if(top > topsArray[i] && topsArray[i+1] && top < topsArray[i+1]) { 
      return i; 
     } 
    } 
    return len-1; 
};