javascript - Create navigation that shows current location on scroll in Foundation 6

Question

I wish to create a vertical navigation bar that tracks current location in Foundation 6 just like the ones found on the documentation:

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

(the right hand side where it says "on this page")

I have a good idea how to create the navigation like so:

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

But I don't know how to highlight the correct link on scroll.

How do I do this?

Answer 1

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