如何重新创建“Scroll Capture”效果？

Question

首先，感谢您抽出宝贵时间查看这篇文章。

我希望重新创建一种我已经多次看过的效果，但却准确地呈现了here。

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

这种互动是如何实现的？

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

谢谢！

Answer 1

巧妙使用position: sticky。您将粘性<div>放入position: relative容器中。当视口到达粘性<div>时，它就像它的position: fixed一样。如果我正确地阅读了spec，那么<div>肯定会在其包含块（position: relative容器）的范围之外偏移，所以尽快开始滚动出视口，它将被推高。

来自规范：

  

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

这里有点demo。