Javascript 当div到达窗口底部时，按住并滚动下一个div

我想在div之间创建这种滑动滚动行为。假设标记如下所示：

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

内容
内容
内容

每个

.slide

div都会根据其内部内容的不同而具有不同的高度，当然也会根据窗口大小而改变其高度

我想要的是，当每个div到达它的底部时，滚动页面，即。当div的底部位于窗口的底部时，div应该是固定的，下面的div应该滚动到上一个固定的div上。容器中的每个div都会重复此行为（在本例中为

main

）

---

您对如何实现这一点有什么想法吗？

我认为通过JavaScript将以下内容添加到每个部分（在我的例子中，jQuery只是为了这个练习）将使每个div的行为与我在scroll上想要的一样：

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

基本上应用CSS

top

值，即div高度减去窗口高度

这还需要div通过CSS应用

position:sticky