使用Foundation滚动单个页面时激活顶部导航链接

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Logo</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li><a href="#section1" id="link1">Section 1</a></li>
      <li><a href="#section2" id="link2">Section 2</a></li>
      <li><a href="#section3" id="link3">Section 3</a></li>
    </ul>
  </section>
</nav>

$(document).foundation();

$(window).scroll(function() {
  var scrollPos = $(window).scrollTop();

  if (scrollPos >= $('#section1').offset().top && scrollPos < $('#section2').offset().top) {
    $('#link1').addClass('active');
  } else {
    $('#link1').removeClass('active');
  }

  if (scrollPos >= $('#section2').offset().top && scrollPos < $('#section3').offset().top) {
    $('#link2').addClass('active');
  } else {
    $('#link2').removeClass('active');
  }

  if (scrollPos >= $('#section3').offset().top) {
    $('#link3').addClass('active');
  } else {
    $('#link3').removeClass('active');
  }
});