如何将多个div相互叠加，并随着用户滚动，每个div向上移动以显示其背后的一个div

Question

I want to layer several divs on top of each other and as the user scrolls the div on top will scroll-up to reveal the dive behind it. Here's an image of I mean:

I know I need to change the natural flow of the document, so I most likely need to use absolute position, but how can I can scroll each div up? I tried using absolute positioning on divs each with a lower z-index, but I don't know how to scroll each one up. Any guidance on a jQuery/JavaScript library or CSS trick to achieve this, or a point in the right direction is much appreciated.

Answer 1

I'm not sure exactly what effect you're looking for, but the following might help you out. You can listen to the window's scroll position using the $(window).scroll event and the $(window).scrollTop() function.

 $(window).scroll(function (e) { var scroll = $(window).scrollTop(); if (scroll > 120) { $(".div-1").slideUp(); } if (scroll > 240) { $(".div-2").slideUp(); } }); 

 section { height: 900px; } div { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; width: 10rem; height: 900px; font-size: 2rem; } .div-1 { background: #faa; } .div-2 { background: #aff; } .div-3 { background: #ffa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div class="div-3">3</div> <div class="div-2">2</div> <div class="div-1">1</div> </section>