javascript - jQuery와 CSS를 사용하여 스크롤에서 고정 된 div를 겹치는 방법이 있습니까?

다음과 같은 스크롤 효과를 만들고 싶습니다

스크롤하는 동안 : 첫 번째 div (.section-one)가 컨테이너 상단으로 스크롤되면 고정됩니다. 두 번째 div (.section-two) 이전 div와 동일한 컨테이너의 맨 위로 스크롤하여 고정됩니다.

. 섹션 2 커버. 섹션 1, 섹션 3 커버 섹션 2 등 카드 효과의 종류. 나는 그것을하는 방법에 대한 아이디어가 있습니다. 하지만 아직 거기에 없습니다.

저도 일반 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>