Javascript 当滚动到节上时，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>

有人知道为什么每次都删除这个类吗？因为当我注释掉

jQuery（'#navbar>ul>li>a'）。removeClass（'clicked'）它工作得很好。正在正确添加这些类。但是删除它们是不起作用的：（
我认为是因为：
#navbar>ul>li>a
与
#navbar ul li a

第一个是试图找到指向#导航栏的直接
子项，第二个是要求在#导航栏下找到一个
子项（在任何级别），选择器的其余部分也是如此

看一看

子组合子（E>F）可以被认为是一种更具体的形式
后代组合子（ef）的一种，因为它只选择第一级
后代

我很难准确地说出问题的症结所在，但你可以尝试更新这行代码：

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

致：

这样，您肯定会从重新分配之前已经“单击”类的唯一链接中删除“单击”类

我还建议您查看bootstrap的scrollspy功能。它听起来像是实现了您想要实现的功能。您可以尝试实现它，或者深入研究他们的代码，看看他们是如何实现它的，并学习一些新的东西


希望这能有所帮助！
我还没有测试过这个，但我认为它应该可以工作

  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');
            }
        });

});

我认为问题在于，
position>=target
仅在用户滚动到节顶部以下时添加活动类，因此即使用户滚动到整个节之外，也会添加该类

改变

if (position >= target) 

到

if（position>=target&&position

似乎解决了问题。
您好，只需稍作改动，它就可以正常工作

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

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

      var id = jQuery(this).attr('id');
      if (classSet == 0)
        jQuery('#navbar ul li a[data-id=' + id + ']').removeClass('clicked');
      if (position >= (target - 200) && position < target + $(this).height()) {
          jQuery('#navbar ul li a[data-id=' + id + ']').addClass('clicked');
          classSet = 1;
      }
  });

});

jQuery（窗口）。滚动（函数（）{
var position=jQuery（this.scrollTop（）；
var类集=0；
jQuery（'.section'）。每个（函数（）{
var target=jQuery（this）.offset（）.top；
var id=jQuery（this.attr（'id'）；
如果（类集==0）
jQuery（'#navbar ul li a[data id='+id+']）。removeClass（'clicked'）；
如果（位置>=（目标-200）和位置
无法解决问题。那么什么没有解决问题呢？你能告诉我你做了什么吗！！你的意思是这不起作用：jQuery（“#navbar ul li a”）。removeClass（'clicked'））@TarekN.Elsamni不是语法，只是代码行。当我注释掉这些类时，它们被正确地添加了。当我撤销注释时，这些类没有被添加，它们会被不断地删除。看一看
if (position >= target) 

if (position >= target && position < target + $(this).height()) 

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

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

      var id = jQuery(this).attr('id');
      if (classSet == 0)
        jQuery('#navbar ul li a[data-id=' + id + ']').removeClass('clicked');
      if (position >= (target - 200) && position < target + $(this).height()) {
          jQuery('#navbar ul li a[data-id=' + id + ']').addClass('clicked');
          classSet = 1;
      }
  });

});