如何为fullPage.js自定义导航栏实现Bootstrap Scrollspy类似效果？

嘿，找了好几小时没搞定确实闹心！其实用fullPage.js自带的回调就能轻松实现类似Bootstrap Scrollspy的高亮效果，我给你拆解一下具体步骤，结合你已经给导航ul加了id的情况来弄：

1. 确认HTML结构对应关系 #

首先确保你的导航项href和fullPage的section锚点/ID完全匹配，比如你的导航ul id是nav-menu：

<!-- 自定义导航栏 -->
<ul id="nav-menu">
  <li><a href="#home">首页</a></li>
  <li><a href="#about">关于我们</a></li>
  <li><a href="#services">服务</a></li>
  <li><a href="#contact">联系我们</a></li>
</ul>

<!-- fullPage 区块 -->
<div id="fullpage">
  <!-- 用data-anchor对应导航href，或者直接用section的id也可以 -->
  <section class="section" data-anchor="home">首页内容</section>
  <section class="section" data-anchor="about">关于我们内容</section>
  <section class="section" data-anchor="services">服务内容</section>
  <section class="section" data-anchor="contact">联系我们内容</section>
</div>

2. 写好高亮的CSS样式 #

先定义默认导航样式，再写高亮的active类：

#nav-menu {
  position: fixed; /* 固定导航在页面顶部/侧边 */
  top: 20px;
  left: 20px;
  list-style: none;
  padding: 0;
}
#nav-menu li {
  margin: 10px 0;
}
#nav-menu a {
  text-decoration: none;
  color: #333;
  padding: 8px 12px;
  transition: all 0.3s;
}
/* 高亮样式，可根据你的网站风格调整 */
#nav-menu a.active {
  color: #fff;
  background-color: #2563eb;
  border-radius: 4px;
}

3. 利用fullPage.js的回调实现高亮逻辑 #

核心是用afterLoad回调——当滚动到某个section加载完成时，自动给对应的导航项加上active类，同时移除其他项的高亮：

// 初始化fullPage.js，同时配置回调
new fullpage('#fullpage', {
  // 基础配置，按需调整
  autoScrolling: true,
  scrollHorizontally: false,
  anchors: ['home', 'about', 'services', 'contact'], // 和section的data-anchor一一对应
  fixedElements: '#nav-menu', // 告诉fullPage忽略固定导航，避免滚动冲突

  // 滚动到目标section后触发的回调
  afterLoad: function(origin, destination, direction) {
    // 先移除所有导航项的active类
    document.querySelectorAll('#nav-menu a').forEach(link => {
      link.classList.remove('active');
    });
    // 找到当前section对应的导航项，添加active类
    const targetLink = document.querySelector(`#nav-menu a[href="#${destination.anchor}"]`);
    if (targetLink) {
      targetLink.classList.add('active');
    }
  }
});

额外说明：如果用section的ID而不是data-anchor #

如果你的section是用ID来标识的（比如<section id="home">），只需要把回调里的destination.anchor换成destination.item.id即可：

const targetLink = document.querySelector(`#nav-menu a[href="#${destination.item.id}"]`);

可选：滚动过程中的过渡处理 #

如果想要在滚动中途也有视觉反馈，可以加上onLeave回调，比如滚动离开当前section时临时切换高亮状态：

onLeave: function(origin, destination, direction) {
  // 离开当前section时，先移除原导航项的active
  document.querySelector(`#nav-menu a[href="#${origin.anchor}"]`)?.classList.remove('active');
  // 提前给目标导航项加上active（可选，看你想要的效果）
  document.querySelector(`#nav-menu a[href="#${destination.anchor}"]`)?.classList.add('active');
}

注意事项 #

• 确保导航项的href和section的锚点/ID完全一致（大小写也要匹配！）
• 如果导航是固定定位，一定要在fullPage配置里加上fixedElements，否则可能出现滚动冲突
• 确保JS代码在DOM加载完成后执行（比如放在</body>标签前，或者用DOMContentLoaded包裹）

内容的提问来源于stack exchange，提问作者064xp