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

Question

当您向下滚动到该部分时，我试图突出显示菜单项。 突出显示有效，但由于某种原因，当滚动到其他部分时，我无法删除突出显示

这是我的菜单的样子：

<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'); 时效果很好。类被正确添加。但是删除它们不起作用:(

Answer 1

没有测试过，但我认为这应该可以工作

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

});

Answer 2

如果无法深入研究实际代码，我很难准确说出问题所在，但您可以尝试更新这一行：

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

到：

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

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

我还建议您查看 bootstrap 的 scrollspy 功能。听起来它可以实现您想要实现的目标。您可以尝试实现它，也可以深入研究他们的代码，看看他们是如何处理它并学习新东西的。

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

希望这会有所帮助！

Answer 3

我认为是因为：#navbar>ul>li>a 与 #navbar ul li a 不一样

第一个是尝试在#navbar 下直接找到<ul> 孩子，第二个是要求在#navbar 下找到<ul> 孩子（任何级别），其余选择器也是如此。

看看here

子组合子 (E > F) 可以被认为是一种更具体的形式 后代组合器 (E F) 的优点在于它只选择第一级 后代。

Answer 4

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

改变

if (position >= target) 

到

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

似乎解决了问题。

Answer 5

您好，只需稍加改动即可正常工作

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

});