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

Question

请任何人帮助在此花费 3 天，但仍然卡住。 我在我的网站上创建了一个部分，正在播放基于视频的滚动 position 到部分，但是当您从底部滚动到第一部分或返回到最后一部分时，视频帧跳转。 actually, I don't know how I make position fixed element to top:0 inside relative container currently I have video frame position: absolute which is top:0 and correct but when I scroll am changing position:absolute to position fixed but that can不能与 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; 您必须删除它以便粘性可以工作，就像这个链接说

像这样更改您的 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 on body并删除所有这些 JS 触发器和视频元素上的所有其他类