如何在Fullpage.js横向滚动扩展的指定section中固定跨幻灯片标题？

核心思路是把固定标题挂载到section层级（而非单个slide内部），通过CSS定位固定位置，避开Fullpage.js对slide的滚动控制逻辑。

步骤1：调整HTML结构 #

把固定标题直接放在目标section里，和slide元素同级，不要嵌套进任何slide：

<div class="section" id="target-section">
  <!-- 固定标题，独立于幻灯片 -->
  <h2 class="section-fixed-title">Get in touch title</h2>
  
  <!-- 横向幻灯片容器 -->
  <div class="slide">幻灯片1内容</div>
  <div class="slide">幻灯片2内容</div>
</div>

步骤2：CSS定位固定位置 #

给目标section设置相对定位，让标题相对于section进行绝对定位，同时提高层级确保不被幻灯片内容遮挡：

#target-section {
  position: relative; /* 作为标题定位的参考容器 */
}

.section-fixed-title {
  position: absolute;
  top: 3rem; /* 自定义垂直位置 */
  left: 4rem; /* 自定义水平位置 */
  z-index: 10; /* 确保标题在幻灯片内容上方 */
  margin: 0;
  /* 可添加自定义样式，比如字体、颜色 */
}

步骤3：（可选）控制标题的显示/隐藏 #

如果需要仅在该section激活时显示标题，利用Fullpage.js的回调函数控制：

new fullpage('#fullpage', {
  // 你的其他Fullpage配置
  afterLoad: function(origin, destination) {
    // 假设目标section是第3个（索引从0开始）
    if (destination.index === 2) {
      document.querySelector('.section-fixed-title').style.display = 'block';
    }
  },
  onLeave: function(origin) {
    if (origin.index === 2) {
      document.querySelector('.section-fixed-title').style.display = 'none';
    }
  }
});

原理说明 #

Fullpage.js的横向滚动扩展只会对section内的.slide元素进行滚动处理，直接挂载在section下的标题不属于任何slide容器，因此不会被纳入横向滚动的逻辑中，切换幻灯片时自然保持固定位置。

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