Question

我需要帮助弄清楚我的javascript发生了什么。我有一些代码，当你在页面的那一部分时，它应该使导航链接有一个活动的类，但它只适用于几个链接，当你滚动而不是一直保持活动时它也会闪烁你在页面的那一部分。请参阅JSFiddle以获取示例https://jsfiddle.net/7szpuqsr/ - 如果您慢慢滚动，您可以看到“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')获取分部类

更新了这部分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用于循环的其余部分

这是hasClass https://api.jquery.com/hasclass/

的文档

使用javascript滚动时如何保持活动类？

1 个答案: