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

根据您的评论，第一个li始终会突出显示。

那是因为它始终返回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');
        }
    });
});

注意：根据您的口味稍微调整一下（例如高度的一半或任何像素数量）

Jquery，菜单项在滚动时过早突出显示

1 个答案: