jQuery突出显示菜单项当滚动部分

我想突出显示菜单项当您向下滚动到该部分。的突出作品，但由于某些原因，当滚动到其他部分jQuery突出显示菜单项当滚动部分

这是我的菜单看起来像我不能去掉高亮显示：

<div id="navbar"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a data-id="home" href="#home">Home</a></li> 
      <li class="navbar-right"><a data-id="cont" href="#contact">Contact</a></li> 
      <li class="navbar-right"><a data-id="exp" href="#exp">Expertise</a></li> 
      <li class="navbar-right"><a data-id="wie2" href="#wie2">Wie</a></li> 
      </ul> 
</div>

在HTML中的每一个地方我用了一节ID锚我加class="section"

这是我的jQuery：

jQuery(window).scroll(function() { 
     var position = jQuery(this).scrollTop(); 

     jQuery('.section').each(function() { 
      var target = jQuery(this).offset().top; 

      var id = jQuery(this).attr('id'); 

      if (position >= target) { 
       jQuery('#navbar>ul>li>a').removeClass('clicked'); 
       jQuery('#navbar ul li a[data-id=' + id + ']').addClass('clicked'); 
      } 
     }); 
});

任何人有任何想法，为什么班级获得每次都删除？因为我注释掉jQuery('#navbar>ul>li>a').removeClass('clicked');，因为它很棒。这些类正在被正确添加。但是，删除它们不起作用:(

来源

2016-04-29 Frank Lucas

我想是因为：#navbar>ul>li>a是不一样的#navbar ul li a

首先是试图找到直接<ul>孩子#navbar，二是要求找到一个<ul>孩子（任何级别）下#navbar和同样适用于选择的其余部分。

看一看here

子组合子（E> F）可以被看作是一个更具体的形成后代组合子（E F）的，因为它仅选择第一级后代。

来源

2016-04-29 13:44:22

**不修复该问题**。 –

那么什么没有解决这个问题！？你能告诉我你做了什么！ –

您的意思是说这不起作用： jQuery（'＃navbar ul li a'）。removeClass（'clicked'）; –

我很难说不清楚是什么问题不能够通过实际的代码来掏，但你可以尝试更新该行：

jQuery('#navbar>ul>li>a').removeClass('clicked');

到：

jQuery('#navbar').find('clicked').removeClass('clicked');

这样，您肯定会在重新分配之前从仅具有“点击”类的链接中删除“已点击”类。

我也建议检查bootstrap的滚动功能。这听起来像是你正在努力实现的。你可以尝试实现它，或者挖掘他们的代码，看看他们如何接近它并学习新的东西。

http://getbootstrap.com/javascript/#scrollspy

希望这有助于！

来源

2016-04-29 13:52:05

还没有测试这一点，但我认为这应该工作

jQuery(window).scroll(function() { 
     var position = jQuery(this).scrollTop(); 

     jQuery('.section').each(function() { 
      var target = jQuery(this).offset().top; 

      var id = jQuery(this).attr('id'); 
      jQuery('#navbar ul li a[data-id=' + id + ']').removeClass('clicked'); 
      if (position >= target) { 
       jQuery('#navbar ul li a[data-id=' + id + ']').addClass('clicked'); 
      } 
     }); 

});

来源

2016-04-29 13:58:45 Koen

youp就是这样！好的 –

jQuery突出显示菜单项当滚动部分

回答

相关问题