有没有一种方法可以使用jquery和css在滚动时重叠固定的div?

我想创建以下滚动效果

滚动时: 当第一个DIV(.section one)滚动到其容器的顶部时, 它变为固定的。当第二个分区(第二节) 滚动到覆盖前一个分区的同一容器的顶部,并变为固定。

第二节封面第一节第三节封面第二节等等 有点像卡片效应。我对怎么做有个想法。 但我还不太明白。

我也愿意使用纯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>