鍍金池/ 問答/HTML/ 如何使?jié)L動不一直獲取,而是數(shù)值變動再獲取一次?

如何使?jié)L動不一直獲取,而是數(shù)值變動再獲取一次?

代碼如下

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')時,為左側(cè)列表對應(yīng)的li添加cur。上面的方法可以實現(xiàn),我的問題是,我F12查看切換時,發(fā)現(xiàn)$('.item ul li')所有的li都在類似刷新的高亮狀態(tài)。我估摸著是不是滾動因為數(shù)值在變導(dǎo)致的一直添加刪除class,所以請問該如何解決這一問題?還望能夠給予幫助,非常感謝!~

回答
編輯回答
糖果果

因為你一直再siblings()使兄弟元素都在一直處于addClass('cur')removeClass('cur')的狀態(tài)

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');
           }  
        }
    });
});
2017年7月30日 17:01
編輯回答
離殤
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');
        }
    });
});
2017年1月8日 19:30