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

Create navigation that shows current location on scroll in Foundation 6

本文关键字：位置 导航 显示 Foundation6 创建 滚动      更新时间：2023-09-26

我想创建一个垂直导航栏，像文档中的一样跟踪Foundation6中的当前位置

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>

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

我该怎么做？

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

相关文章：