使用javascript滚动时如何保持课堂活跃？

Question

我需要帮助弄清楚我的 javascript 发生了什么。我有一些代码应该使导航链接在您位于页面的该部分时具有活动类，但它仅适用于几个链接，并且在您滚动时它也会闪烁而不是一直保持活动状态你在页面的那个部分。有关示例https://jsfiddle.net/7szpuqsr/，请参阅 JSFiddle ——如果您慢慢滚动，您可以看到“home”是如何变得活跃的。我试图让每个链接在您单击它时以及在您位于页面的整个部分时都具有活动类。

我还有一个 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')获取section类

更新了这部分 js 以检查活动类

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/的文档