时间戳

首页 > 解决方案 > 当 div 到达窗口底部时，粘贴并滚动到下一个 div

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

问题描述

我想在 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）。

您对如何实现这一目标有任何想法吗？

标签： javascripthtmlcss

解决方案

我认为通过 JavaScript 将以下内容添加到每个部分（在我的情况下 jQuery 仅用于本练习）将使每个 div 在滚动时表现得像我想要的那样：

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

本质上应用一个 CSStop值，即 div 高度减去窗口高度。

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

推荐阅读