在 Foundation 6 中创建显示当前滚动位置的导航

Question

我希望创建一个垂直导航栏来跟踪 Foundation 6 中的当前位置，就像在文档中找到的那样：

http://foundation.zurb.com/sites/docs/installation.html

（右侧显示“在此页面上”）

我很清楚如何像这样创建导航：

<div class="large-3 columns" data-sticky-container>
  <nav class="columns" data-sticky data-anchor="exampleId" data-sticky-on="large">
    <ul class="vertical menu" data-magellan>
      <li><a href="#first">First Arrival</a></li>
      <li><a href="#second">Second Arrival</a></li>
      <li><a href="#third">Third Arrival</a></li>
    </ul>
  </nav>
</div>

但我不知道如何在滚动条上突出显示正确的链接。

我该怎么做？

Answer 1

当您滚动到页面的相应部分时，.active 类将添加到链接中。您只需在.active 类中添加一些CSS 规则，例如background-color color。