Is there a way to overlap a fixed div on scroll using jQuery and CSS?

Question

I would like to create the following scrolling effect

While scrolling: When the first div (.section-one) scrolls to the top of its container, it becomes fixed. When the second div (.section-two) scrolls to the top of the same container it covers the previous div and becomes fixed.

.section-two covers .section-one, section-three covers section-two and so on Kind of like a card effect. I have an idea of how to do it. But I'm not quite there yet.

I am also open to using plain JavaScript as well

I would like to mention. This is not Parallax scrolling where the background content (ie an image) is moved at a different speed than the foreground content while scrolling.

This is the foreground layer overlapping a fixed layer

            .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>              

Answer 1

if i'm not mistaken, you are looking for somewhat of a position: sticky effect.

try this, and see if it matches your request (no JS required):

.section-one, section-two .section-three {
    position: sticky;
    top: 0;
}

Would also recommend looking up more info about position: sticky , and how you could apply it to your needs.

Answer 2

I'm not 100% sure if you search for a "how I do it my own"-solution or a "how do i do it" solution.

how do i do it

Is this what you're looking for? http://scrollmagic.io/examples/advanced/parallax_sections.html If so you could use Scrollmagic: http://scrollmagic.io/

how I do it my own

If you just want to learn how to do this your own, "Parallax" is what you can search for (Google or Stackoverflow, there are unlimited answers).