如何在滾動時停止跳躍 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 觸發器和視頻元素上的所有其他類