当div到达窗口底部时，粘贴并滚动到下一个div上

Question

我想在div之间创建这种滑动滚动行为。假设标记看起来像这样：

<main>
<div class="slide">Content</div>
<div class="slide">Content</div>
<div class="slide">Content</div>
</main>

每个.slidediv将根据其内部的内容具有不同的高度，当然也会根据窗口大小更改其高度。

我想要的是，当每个div在滚动页面时到达其底部时，即当div的底部在窗口的底部时，div应该变为固定的，然后下面的div应该滚动到上一个固定的div上。容器中的每个div都会重复这种行为(在本例中为main(。

你对如何实现这一目标有什么想法吗？

Answer 1

我认为通过JavaScript将以下内容添加到每个部分(在我的例子中，jQuery只是为了这个练习(将使每个div在滚动时表现得像我想要的那样：

$(".slide").each(function(){
$(this).css({
"top": `-${$(this).height() - $(window).height()}px`
})
})

本质上应用CSStop值，该值是div高度减去窗口高度。

这还需要div通过CSS将position: sticky应用于它们。