javascript - 在滚动时将类添加到 元素内的链接

Question

当页面的特定部分处于事件状态时，是否可以将类添加到 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>  

这是 CSS:

#menu li a {
    color:#7a7a7a;
    text-decoration: none;
    font-size: 12px;
    margin-right:20px;
}

#menu li.last a {
    color:#7a7a7a;
    text-decoration: none;
    font-size: 12px;
    margin-right:0px;
}

#menu li.current a {
color: #0086be;
}

我想做的是在到达页面的特定部分时将类 .current 添加到 li 元素内的链接。

我相信这只有使用 Javascript 才有可能，谁能指出实现这一目标的正确途径？

提前致谢

Answer 1

我想你想要在 bootstrap 中使用类似 scrollspy 的东西，你可以使用它或者你可以找到https://gist.github.com/pascaldevink/2380129旁路人

或者这里是 fiddle http://jsfiddle.net/ia_archiver/Kb7xq/

为此你需要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);