Javascript “如何重建”；“滚动捕捉”；效果如何？

首先，感谢您抽出时间查看此帖子

我正在寻找一个效果，我已经看到了很多次，但准确地呈现

当向下滚动页面时，用户到达一个视频元素（页面上有少量这些元素），当所述元素到达屏幕顶部时，需要在离开该元素之前进行一定量的滚动。由于元素是全视图高度，它创建了一种“锁定”效果，尽管滚动条清楚地显示我仍在滚动

这种互动是如何实现的

元素的内容、模糊、视频、动画文本都放在一边，如何在带有100vh div和css/js的长页面上重现这种效果？（非常不喜欢jQuery，只喜欢vanilla JS）

---

谢谢大家!

巧妙地使用

位置：sticky

。您将粘性的

放入

位置：相对
容器中。当视口到达粘滞的
位置时，它的行为就好像它是
位置：固定的
。如果我正确读取，则
将永远不会偏移到其包含块（
位置：相对
容器）的边界之外，因此一旦开始滚动出视口，就会将其向上推

根据规范：

粘滞定位元素和粘滞约束矩形底部之间的交点限制了在任何方向上的移动，因此偏移不会将粘滞定位元素推到其包含块之外。但是，当滚动页面时，元素可以在其包含块内自由移动时，它似乎被固定到相关的流根边缘，类似于固定位置元素

这里有一点。
太好了！非常感谢你的洞察力，这正是我想要的。