Javascript 将类添加到a中的链接<；李>；滚动上的元素

当页面的某个部分处于活动状态时，是否可以向li元素内的链接添加类

我有一个单页的网站，想改变链接的颜色时，该页面的特定部分是通过滚动达到

这是我的HTML：

<header id="header"> 
        <section class="container">
                <nav>
                    <a class="logo" href="index.html">Logo</a>
                    <div id="menu">
                        <ul id="links"> 
                            <li><a href="#services">Services</a></li>
                            <li><a href="#about">About</a></li>
                            <li><a href="#clients">Clients</a></li>  
                            <li class="last"><a href="#contact">Contact</a></li>
                        </ul>
                    </div>
                </nav>
        </section>
    </header>  

我想做的是，每当到达页面的特定部分时，将class.current添加到li元素内的链接中

我相信这只有用Javascript才能实现，有人能给我指出实现这一点的正确途径吗

---

提前谢谢

我想你需要在bootstrap中使用类似scrollspy的东西， 您可以使用它，也可以找到bypascaldevink

还是小提琴在这儿

您将需要jquery来完成此任务

 $.fn.scrollspy = function ( option ) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('scrollspy')
        , options = typeof option == 'object' && option
      if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }
  $.fn.scrollspy.Constructor = ScrollSpy
  $.fn.scrollspy.defaults = {
    offset: 10
  }
  $(function () {
    $('[data-spy="scroll"]').each(function () {
      var $spy = $(this)
      $spy.scrollspy($spy.data())
    })
  })

}(window.jQuery);

---

如果我理解正确，我想这就是你所需要的：。CSS和HTML代码保持不变，这是我使用的jQuery代码：

$(window).scroll(function() {    

var scroll = $(window).scrollTop();

if (scroll > 500) {
$("#links li:first-child").addClass("current");
}

if (scroll > 750) {
$("#links li:first-child").removeClass("current");
$("#links li:nth-child(2)").addClass("current");
}

var scrollBottom = $(window).scrollTop() + $(window).height();

if (scroll < 500) {
$("#links li:first-child").removeClass("current");
}

if (scroll < 750) {
$("#links li:nth-child(2)").removeClass("current");
}

});

$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>500）{
$（“#链接李：第一个孩子”）.addClass（“当前”）；
}
如果（滚动>750）{
$（“#links li:first child”）.removeClass（“当前”）；
$（“#links li:nth child（2）”）.addClass（“当前”）；
}
var scrollbooth=$（窗口）.scrollTop（）+$（窗口）.height（）；
如果（滚动<500）{
$（“#links li:first child”）.removeClass（“当前”）；
}
如果（滚动<750）{
$（“#links li:nth child（2）”）.removeClass（“当前”）；
}
});

---

基本上，当您向下滚动到500px时，

li:first child

会自动分配

current

类。您可以根据需要添加更多的

if

查询来修改jQuery以满足您的需要。您可以使用不同的子选择器，如

li:first child

，

li:nth child（2）

等，将列表中不同的

作为目标。

使用悬停功能，您可以实现这一点。在页面的特定部分悬停时，将类添加到li中的链接中。e、 g

  $('#specificPartOfPageId').hover(function(){
      $('#links').children().children('a').addClass('current');
  });

这会将.current类添加到该UL元素中的每个链接中。

---

希望这有帮助。

你的意思是鼠标悬停在鼠标上方？你可以使用简单的jquery实现这一点。Ref Css无法添加或删除元素的属性/类。不清楚您到底想做什么。你想响应页面上的滚动位置还是鼠标位置？基本上我只想在到达页面上的位置时更改链接的颜色。例如我滚动浏览页面，当我浏览不同的部分（其中包含ID#服务、#关于、#客户、#联系）时，导航栏上的链接颜色会发生变化。几乎就是这样！问题是，在达到这些500px之后，链接将保留在class.current中，我想删除该类以恢复原始颜色。例如，在500到750px之间，我希望链接为蓝色（添加.current类），但在该范围之外，我希望它返回灰色（删除.current类）。请使用新的JSFIDLE链接检查我的更新答案。基本上在500px-750px之间，

li:first child

被分配

current

类，在750px之后，当我相信您的下一页将开始时，

li:nth child（2）

被分配

current

类。类似地，当您滚动回顶部时，当您通过类的区域时，这些类将被删除。更新的fiddle:。在这把小提琴中，当你上下滚动时，你可以看到导航菜单中的所有4项都在改变颜色。老兄，非常感谢你做出的惊人努力，我真的很感激！这是可行的，但我认为这可能不是最好的方法，因为屏幕分辨率。。。小屏幕用户的滚动次数要比大屏幕用户的滚动次数多得多，这会导致链接在页面的特定部分还不可见时过早更改其颜色，而大屏幕用户在页面的最后一部分之前甚至不会滚动那么多。这真的很有意义，我想这正是我想要做的，但尝试了却没有成功。

  $('#specificPartOfPageId').hover(function(){
      $('#links').children().children('a').addClass('current');
  });