如何在使用javascript滚动时保持课程活动？

Question

我需要帮助指出我的javascript发生了什么。我有一些代码，当你在页面的那一部分时，应该让导航链接有一个活动的类，但它只是为一对夫妇链接工作，当你滚动而不是在整个时间保持活动时它也会闪烁你在页面的那一部分。以JSFiddle为例https://jsfiddle.net/7szpuqsr/ - 如果您慢速滚动，您可以看到“家”在一瞬间变得活跃。我试图让每个链接在您点击它时以及在页面的整个部分都有活动类。

我也有一个JavaScript粘滞导航栏和平滑滚动工作，所以我不知道是否可能有任何阻碍的方式？预先感谢您的帮助。

这里的JavaScript的我想使用的活动类：

var sections = $('section') 
, nav = $('nav') 
, nav_height = nav.outerHeight(); 

$(window).on('scroll', function() { 
var cur_pos = $(this).scrollTop(); 

    sections.each(function() { 
    var top = $(this).offset().top - nav_height, 
    bottom = top + $(this).outerHeight(); 

    if (cur_pos >= top && cur_pos <= bottom) { 
    nav.find('a').removeClass('active'); 
    sections.removeClass('active'); 

    $(this).addClass('active'); 
    nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active'); 
    } 
    }); 
}); 

nav.find('a').on('click', function() { 
var $el = $(this) 
, id = $el.attr('href'); 

$('html, body').animate({ 
    scrollTop: $(id).offset().top - nav_height 
    }, 500); 

    return false; 
}); 

Answer 1

像这样的事情？我不能在视觉上重现闪烁在我的机器上，但我可以看到被删除的类/不断补充上滚动

https://jsfiddle.net/7szpuqsr/1/

的主要变化，我添加了一个类你的部分，你有太多的部分，但与您的代码是为了工作的方式，它更容易添加一个类的部分，下面的例子

<section id="home" class="section"> 

var sections = $('.section')得到部分类

更新j的这部分s到检查活动类

if (cur_pos >= top && cur_pos <= bottom) { 
    if(!$(this).hasClass("active")) { 
    nav.find('a').removeClass('active'); 
    sections.removeClass('active'); 

    $(this).addClass('active'); 
    nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active'); 
    } 
} 

您也可以缓存$(this)到一个变量的部分循环内像

var $this = $(this); 

就用$this为循环的其余部分

这里是文档hasClasshttps://api.jquery.com/hasclass/