Jquery，滾動條上顯示的菜單項太早

Question

我有一個帶2個div的頁面。第一個包含項目列表，第二個包含列表中每個項目的1個部分。 向下滾動第二個div時，我希望正確的li在相應部分處於「活動狀態」時突出顯示。問題在於，他們在達到正確部分之前會受到高亮顯示。 這是我製作的codepen。而這裏的jQuery函數使用：

$('#event-details .content').on('scroll', function() { 
    $('.event-title').each(function() { 
     if($('#event-details .content').scrollTop() >= $(this).offset().top) { 
      var id = $(this).attr('id'); 
      console.log(id); 
      $('.event-title').removeClass('active'); 
      $('#' + id).addClass('active'); 
     } 
    }); 
}); 

我想這個問題是對的條件，但我解決不了。任何想法呢？謝謝！

Answer 1

通過您的意見第一個李總是突出顯示。

這是因爲它總是會返回1，因爲scrollTop總是大於第一部分的偏移量。 因此，您將檢查該部分結束的位置。這是頂部偏移加上該部分的高度。

$('#event-details .content').on('scroll', function() { 
    $('.event-title').each(function() { 
     var id = $(this).attr('id'); 
     if($('#event-details .content').scrollTop() >= $('.event-' + id + '-details').offset().top && 
      /* here is what is needed in the condition */ 
      $('#event-details .content').scrollTop() <= $('.event-' + id + '-details').offset().top + $('.event-' + id + '-details').height()) { 
      console.log(id); 
      $('.event-title').removeClass('active'); 
      $('#' + id).addClass('active'); 
     } 
    }); 
}); 

注：調整它一點你的口味改變（例如高度或像素的任何數量的一半）