Css 位置固定元素是否可以使用fullpage.js在节下和节上传递？_Css_Transform_Z Index_Fullpage.js

Css 位置固定元素是否可以使用fullpage.js在节下和节上传递？

css

Css 位置固定元素是否可以使用fullpage.js在节下和节上传递？,css,transform,z-index,fullpage.js,Css,Transform,Z Index,Fullpage.js,我在一个页面中有两个组件，一个位置固定元素覆盖浏览器窗口，该窗口有一个透明背景的子图像，以及一个由CSS转换支持的fullpage.js垂直滑块，带有以下标记： <body> <div class="fixed-element"><img src="transparent-bg-icon.png" /></div> <div id="fullpage-container"> <div class="section"

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

<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索引组合都不可能做到这一点，如果我将fixed元素放在fullpage容器中，由于父级上的转换，fixed元素的位置将不再受重视

有没有达到我错过的效果？

听起来不太可能。主要原因是，每当您使用fullpage.js回调onLeave或onLoad更改z-index时，图像将突然出现或消失，该索引必须处于区段离开或区段装载状态：

在onLeave上更改z索引时，图像将在第一个区段移动到目标时消失在该区段后面

在第二部分的后加载上更改z索引时，图像将在第二部分真正停止移动之前的一小段时间内覆盖第二部分。所以你会看到它是如何突然消失在身后的

我能看到的唯一选择是：

您可以使用fullPage.js选项scrollBar:true，以便使用scroll事件或任何执行此操作的库获取当前滚动位置。然后，每当你检测到固定的图像将击中第二节，改变z-指数，刚好在它之前。即使将固定元素放在包装器中，您也可以使用z-index。因为fullPage将不再使用css3转换，尽管性能不会那么平稳

谢谢你的帮助，还有一个很棒的图书馆！