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

Foundation是一个流行的前端开发框架，它提供了一套强大的工具和组件，用于构建响应式的网站和应用程序。在Foundation中，要实现滚动单个页面时激活顶部导航链接，可以使用Foundation提供的滚动监听功能和相应的JavaScript代码。

具体步骤如下：

首先，确保你已经引入了Foundation的CSS和JavaScript文件到你的页面中。
在HTML中，创建一个顶部导航栏，并为每个导航链接添加一个唯一的ID。例如：

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

在JavaScript中，使用Foundation的滚动监听功能来监听页面滚动事件，并根据滚动位置激活相应的导航链接。例如：

$(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');
  }
});

在上述代码中，我们使用$(window).scroll来监听页面滚动事件。根据滚动位置和各个页面区块的偏移位置，我们通过添加或移除active类来激活或取消激活相应的导航链接。

这样，当页面滚动到相应的区块时，对应的导航链接就会被激活。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云CDN（内容分发网络）。