Question

请任何人帮助在此上花费 3 天，但仍然卡住。我在我的网站上创建了一个部分，其中正在播放基于视频的滚动位置到部分，但是当您从底部滚动到第一部分或返回到最后一部分时，视频帧会跳转。实际上，我不知道如何在相对容器内将位置固定元素设置为 top:0 目前我有视频帧位置：absolute 是 top:0 并且正确但是当我滚动时正在更改 position:absolute 到位置固定但是可以不能与 top:0 一起使用，因为固定元素不能用于相关容器，所以我添加了 top:35% 请在这里观看视频 https://www.loom.com/share/c29a3cadb3dc4420a59baaae072c1cec

这是网站链接 https://qa.modulos.ai/product-overview/

Answer 1

好的，我找到了你的解决方案！

删除您拥有的所有内容，并删除那些类 not-sticky-top 和 sticky not-sticky-bottom

您的主要问题是 body 有 overflow: hidden;，您必须将其删除，以便粘性可以工作，就像 this link 所说

像这样改变你的css：

body {
  overflow-x: visible;
}

.sticky {
  position: sticky !important;
  top: 100px; // This is important so that the video doesn't go under the header, you can fine tune it afterwords
  max-width: 100%;
}

.video-side {
  position: relative;
}

不要忘记删除 over-flow: hidden 上的 body 并删除视频元素上的所有 JS 触发器和所有其他类

如何在滚动时停止跳跃位置固定元素

1 个答案: