使用fullpage.js实现滚动到锚点时导航项置顶的方案咨询

嘿，我来帮你搞定这个需求！针对fullpage.js长滚动页面的fixed导航，要实现激活项自动置顶且保持其他链接顺序的iOS滚轮效果，我整理了一套高效的实现方案——不用依赖slick这类额外插件，直接基于原生JS配合fullpage的事件就能轻松搞定：

利用fullpage提供的afterLoad事件监听幻灯片切换，每次激活新的导航项时，把它从当前位置移到导航容器的最顶部，同时保证其他元素的相对顺序不变：激活项前面的元素会自然排到它后面，后面的元素则留在原位置之后，视觉上就模拟出了iOS滚轮“滚动到顶部”的效果。

1. 准备HTML结构 #

假设你的导航是一个无序列表，每个列表项对应fullpage的一个section：

<nav class="fixed-nav">
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
    <li><a href="#section5">Section 5</a></li>
  </ul>
</nav>

<div id="fullpage">
  <div class="section" id="section1">Section 1 Content</div>
  <div class="section" id="section2">Section 2 Content</div>
  <div class="section" id="section3">Section 3 Content</div>
  <div class="section" id="section4">Section 4 Content</div>
  <div class="section" id="section5">Section 5 Content</div>
</div>

2. 基础CSS样式 #

确保导航固定定位，给激活项加高亮样式，同时添加过渡让移动更顺滑：

.fixed-nav {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999;
}
.fixed-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fixed-nav li {
  margin: 10px 0;
  transition: all 0.3s ease; /* 过渡动画让移动更自然 */
}
.fixed-nav li.active a {
  color: #e74c3c;
  font-weight: 700;
  padding-left: 8px;
}

3. JS逻辑实现 #

初始化fullpage时，监听afterLoad事件处理导航项的移动：

// 初始化fullpage
new fullpage('#fullpage', {
  anchors: ['section1', 'section2', 'section3', 'section4', 'section5'],
  navigation: false, // 关闭fullpage自带导航，用我们的自定义导航
  afterLoad: function(origin, destination, direction) {
    const navList = document.querySelector('.fixed-nav ul');
    const allNavItems = Array.from(navList.children);
    
    // 找到当前激活的导航项
    const activeNavItem = allNavItems.find(item => 
      item.querySelector('a').getAttribute('href') === `#${destination.anchor}`
    );

    if (!activeNavItem || activeNavItem === navList.firstElementChild) {
      return; // 如果找不到激活项，或者已经在顶部，直接跳过
    }

    // 方案1：直接移动（无动画，简洁高效）
    navList.removeChild(activeNavItem);
    navList.insertBefore(activeNavItem, navList.firstElementChild);

    // 方案2：带滚动动画（更贴近iOS滚轮效果）
    // 先让所有导航项向上位移，再插入激活项到顶部，最后重置位移
    /*
    allNavItems.forEach(item => {
      item.style.transform = 'translateY(-100%)';
    });
    setTimeout(() => {
      navList.removeChild(activeNavItem);
      navList.insertBefore(activeNavItem, navList.firstElementChild);
      allNavItems.forEach(item => {
        item.style.transform = '';
      });
    }, 300);
    */
  },
  // 可选：处理激活项的样式切换
  onLeave: function(origin, destination, direction) {
    if (origin) {
      const oldActiveItem = document.querySelector(`.fixed-nav li a[href="#${origin.anchor}"]`).parentElement;
      oldActiveItem.classList.remove('active');
    }
    const newActiveItem = document.querySelector(`.fixed-nav li a[href="#${destination.anchor}"]`).parentElement;
    newActiveItem.classList.add('active');
  }
});

• 性能优化：判断激活项是否已经在顶部，避免重复DOM操作，减少不必要的重排重绘。
• 动画自定义：两种方案可选，直接移动适合追求简洁的场景，带动画的方案更贴近iOS滚轮的视觉效果，你可以根据需求调整动画时长和样式。
• 方向兼容：不管用户是向上还是向下滚动页面，逻辑都能正常工作，因为我们只关注当前激活项的位置。
• 响应式适配：如果移动端导航是折叠状态，可以通过媒体查询禁用这个移动逻辑，只在大屏设备生效。

slick是专门的轮播插件，用来实现这个需求属于“大材小用”——不仅会引入额外的依赖增加页面体积，而且自定义起来不如原生DOM操作灵活。直接用fullpage的事件配合原生JS，更轻量、更可控，也更容易调整细节效果。

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