使用 fullpage.js 是否可以让位置固定的元素同时通过下方和上方的部分？

Question

我在一个页面中有两个组件，一个覆盖浏览器 window 的位置固定元素，它有一个透明背景的子图像，以及一个 fullpage.js 由 [=21= 提供支持的垂直滑块] 转换，带有以下标记：

<body>
  <div class="fixed-element"><img src="transparent-bg-icon.png" /></div>
  <div id="fullpage-container">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
  </div>
</body>

我希望固定元素显示在第一部分上，以便图像可见，然后第二部分在图像上滑动，使图像消失在该部分下方。使用上面的标记，这对于 z-index 的任何组合都是不可能的，并且如果我将固定元素放在 #fullpage-container 中，由于对父元素的转换，不再考虑 .fixed-element 的固定位置.

有没有办法实现我错过的这种效果？

Answer 1

听起来不太可能。主要是因为每当您更改 z-index（必须使用 fullpage.js 回调 onLeave 或 onLoad 进行部分休假或部分加载）时，图像会突然出现或消失:

在 onLeave 上更改 z-index 时，图像将在第一个部分移动到目的地时消失在第一个部分后面。
当更改第 2 部分 afterLoad 上的 z-index 时，在第 2 部分真正停止移动之前，图像会在第 2 部分上方停留一小段时间。所以你会看到它是如何突然消失在后面的。

我能看到的唯一选项是：

您使用 fullPage.js 选项 scrollBar:true 因此您可以使用滚动事件（或任何这样做的库）获取当前滚动位置。然后，每当您检测到固定图像将到达第二部分时，就在它到达之前更改 z-index。即使将固定元素放在包装器中，您也可以使用 z-index。由于 fullPage 将不再使用 css3 转换（尽管性能不会那么流畅）

使用 fullpage.js 是否可以让位置固定的元素同时通过下方和上方的部分？

Is it possible for a position fixed element to pass both under and over sections using fullpage.js?

css

transform

z-index

fullpage.js