如何使滚动不一直获取，而是数值变动再获取一次？

Question

代码如下

document.addEventListener('scroll', function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    $('.article-content ul li').each(function(){
        var topset = $(this).offset().top;
        if(scrollTop >= topset){
            $('.item ul li').eq(topindex).addClass('cur').siblings().removeClass('cur');
        }
    });
});

作用：当页面滚动到$('.article-content ul li')时，为左侧列表对应的li添加cur。上面的方法可以实现，我的问题是，我F12查看切换时，发现$('.item ul li')所有的li都在类似刷新的高亮状态。我估摸着是不是滚动因为数值在变导致的一直添加删除class，所以请问该如何解决这一问题？还望能够给予帮助，非常感谢！~

Answer 1

因为你一直再siblings()使兄弟元素都在一直处于addClass('cur')或 removeClass('cur')的状态

var $prev=null;
document.addEventListener('scroll', function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    $('.article-content ul li').each(function(){
        var topset = $(this).offset().top;
        if(scrollTop >= topset){
            var $now=$('.item ul li').eq(topindex);
            if($prev!==$now){
                if($prev){
                    $prev.removeClass('cur');
                }
                $prev=$now.addClass('cur');
           }  
        }
    });
});

Answer 2

document.addEventListener('scroll', function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    $('.article-content ul li').each(function(){
        var topset = $(this).offset().top;
        if(scrollTop >= topset && !$('.item ul li').eq(topindex).hasClass("cur")){
            $('.item ul li').eq(topindex).addClass('cur').siblings().removeClass('cur');
        }
    });
});