Javascript 有没有一种方法可以使用jQuery和CSS重叠滚动上的固定div？

我想创建以下滚动效果

滚动时： 当第一个div（.section one）滚动到其容器的顶部时， 它变得固定了。当第二个div（.section 2）时 滚动到覆盖上一个div的同一容器的顶部，并变得固定

第二节包括第一节、第三节包括第二节等等 有点像纸牌效应。我知道怎么做。 但我还没有完全做到

我也愿意使用纯JavaScript

---

我想提一下。这不是视差滚动，其中背景内容（即图像）在滚动时以与前景内容不同的速度移动

这是与固定层重叠的前景层

            .fixed {
                left: 0;
                position: fixed;
                right: 0;
                z-index: 0;
            }

            .section-one, section-two .section-three {
                height: 100vh;
            }


            .scroll-contain {
                overflow-y: hidden;
            }


            function sticktothetop() {
                var element_top = $('.scroll-contain').scrollTop();
                var top = $('#top-of-element').offset().top;
                if (element_top > top) {
                    $('.section-one').addClass('fixed');
                    $('#top-of-element').height($('.section-one').outerHeight());
                } else {
                    $('.section-one').removeClass('fixed');
                    $('.section-one').height(0);
                }
            }

            $(function() {
                $(window).scroll(sticktothetop);
                sticktothetop();
            });
        <div class="scroll-contain">
        <div id="top-of-element"></div>
            <section class="section-one" style="background-color: yellow">
                <div class="card">
                    <p>
                    Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
                    </p>
                </div> 
            </section>

            <section class="section-two" style="background-color: pink">
                <div class="card">
                    <p>
                    Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
                    </p>
                </div> 
            </section>

            <section class="section-three" style="background-color: orange">
                <div class="card">
                    <p>
                    Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
                    </p>
                </div> 
            </section>              
        </div>              

。已修复{
左：0；
位置：固定；
右：0；
z指数：0；
}
.第一节，第二节，第三节{
高度：100vh；
}
.滚动包含{
溢出y：隐藏；
}
函数sticktothetop（）{
var element_top=$（'.scroll contain'）.scrollTop（）；
var top=$（'#元素顶部'）.offset（）.top；
如果（元素顶部>顶部）{
$（'.section one'）.addClass（'fixed'）；
$（'#元素顶部'）。高度（$（'.section one'）。outerHeight（））；
}否则{
$（'section one'）。removeClass（'fixed'）；
$（'第一节'）。高度（0）；
}
}
$（函数（）{
$（窗口）。滚动（粘贴到顶部）；
粘贴到顶部（）；
});

前庭腔隙为弓形。拍卖人Elite在拍卖我的房子时坐着amet mauris Comodo quis。不可转让的侵权行为，不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的侵权行为。虎背箭。


前庭腔隙为弓形。拍卖人Elite在拍卖我的房子时坐着amet mauris Comodo quis。不可转让的侵权行为，不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的侵权行为。虎背箭。


前庭腔隙为弓形。拍卖人Elite在拍卖我的房子时坐着amet mauris Comodo quis。不可转让的侵权行为，不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的不可转让的侵权行为。虎背箭。

我不能100%确定您是否在搜索“我如何做我自己”的解决方案或 “我该怎么做”的解决方案

我该怎么做

这就是你要找的吗？ 如果是这样，您可以使用Scrollmagic：

我是如何自己做的

---

如果你只是想自己学习如何做到这一点，“视差”是你可以搜索的（谷歌或Stackoverflow，有无限的答案）。

如果我没有弄错的话，你正在寻找某种

位置：粘性
效果

试试这个，看看它是否符合您的请求（不需要JS）：

还建议您查找有关
位置：sticky
的更多信息，以及如何将其应用于您的需要。
谢谢您的建议。我见过多个示例，但大多数都需要大型库。除非我遗漏了什么。我会再做一次搜索。但这是你要寻找的“视差”效果吗？如果它覆盖了一个固定对象的重叠部分，则是。这不是视差滚动，在滚动时背景内容（即图像）的移动速度与前景内容的移动速度不同。这是与固定层重叠的前景层。这是一个良好的开端，但它只解决了问题的一半。我了解到，在IE浏览器中，sticky不起作用。
.section-one, section-two .section-three {
    position: sticky;
    top: 0;
}