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

Question

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

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

（右边写着 "on this page"）

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

<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>

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

我该怎么做？

Answer 1

当您滚动到页面的相应部分时，.active class 会添加到 link。您只需要添加一些 CSS 规则，例如 background-color 颜色到 .active class.

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

Create navigation that shows current location on scroll in Foundation 6

javascript

html

css

zurb-foundation

zurb-foundation-6