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>

在我使用id锚点的每个部分的html中，我添加了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

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

不同

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

看看here

儿童组合子（E> F）可以被认为是更具体的形式后代组合子（E F）的结果是它只选择第一级后代。

Answer 3

如果不能深入了解实际代码，我很难准确说出问题所在，但您可以尝试更新此行：

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

为：

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

这样你肯定会删除课程＆＃34;点击＆＃34;从只有已经有类的链接＆＃34;点击＆＃34;在重新分配之前。

我还建议您查看bootstrap的scrollspy功能。这听起来像你正在努力实现的目标。您可以尝试实现它，或者深入研究它们的代码，看看它们是如何接近它并学习新的东西。

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

希望这有帮助！

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

});

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

5 个答案: