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'); 
     } 
    }); 
}); 

注：调整它一点你的口味改变（例如高度或像素的任何数量的一半）