Fullpage.js - 水平滚动扩展 - 固定元素对部分中的所有幻灯片可见答案

【问题标题】：Fullpage.js - Scroll Horizontally extension - fixed element visible for all slides in the sectionFullpage.js - 水平滚动扩展 - 固定元素对部分中的所有幻灯片可见
【发布时间】：2022-11-02 05:46:03
【问题描述】：

我正在使用来自 alvarotrigo 的 Fullpage.js 的 Scroll Horizontally 扩展

在一个部分中，我有两张水平幻灯片。我希望他们有一个固定的标题，在两张幻灯片上保持固定在同一位置（但仅限于该部分）。

这是一个示例......当页面从左幻灯片滑到右幻灯片时，“获取联系标题”将保持固定： https://drive.google.com/file/d/18FwzZ6vwWPDfeNJOtNTsBk-rePaK02xh/view?usp=sharing

通过 JS 注入 HTML 元素的方式，我看不到如何修复标题部分而不是单个幻灯片。

【问题讨论】：

标签： javascript html fullpage.js

【解决方案1】：

只需在部分内添加绝对定位元素，但在幻灯片之前或之后。

并确保使用 fullPage.js 4。

  <div class="section">
      <div class="fixed-slides-wrapper">Test</div>
        <div class="slide" data-anchor="slide1">Slide 2.1</div>
        <div class="slide" data-anchor="slide2">Slide 2.2</div>
    </div>

.section {
  text-align:center;
  font-size: 3em;
  position: relative;
}

.fixed-slides-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background: red;
  height: 80px;
  width: 100vw;
  color: white;
  text-align: center;
}

Codepen demo

【讨论】：