I'm working on a section where these cards are stacked, the problem is that they do it using position: sticky and when the effect of cards is over, the cards go through the "sticky-header" and I would like them to go off the screen as if the cards pushed the "sticky-header", like the normal behavior.
section { padding: 6rem 1.6rem; max-width: 120rem; display: flex; flex-direction: column; align-items: center; margin: 0 auto; text-align: center;}h2 { font-size: 2.4rem;}h3 { font-size: 2.4rem; color: var(--white); margin-bottom: 4rem; max-width: 60rem;}.sticky-header { position: sticky; top: 3rem; display: flex; flex-direction: column; align-items: center; text-align: center;}.process__container { width: 100%; max-width: 120rem; display: flex; flex-direction: column; align-items: center;}.cards-container { width: 100%; max-width: 90rem;}.card { position: sticky; top: 16rem; padding-top: calc(var(--index) * 2rem);}.card-body { background-color: var(--card-bg-color); border-radius: 50px; height: 200px; display: flex; justify-content: center; align-items: center; transition: all 0.5s;}.card:nth-child(1) .card-body { background-color: #52B2CF; }.card:nth-child(2) .card-body { background-color: #E5A36F; }.card:nth-child(3) .card-body { background-color: #9CADCE; }.card:nth-child(4) .card-body { background-color: #D4AFB9; }.empty-container{ width:100%; background-color: red; height: 1000px; }<section id="process" data-aos="fade-down" data-aos-duration="1000"><div class="process__container"><div class="sticky-header"><h2 class="text-gradient">pill</h2><h3>This is a long title</h3></div><ul class="cards-container"><li class="card" style="--index: 1;"><div class="card-body">card 1</div></li><li class="card" style="--index: 2;"><div class="card-body">card 2</div></li><li class="card" style="--index: 3;"><div class="card-body">card 3</div></li><li class="card" style="--index: 4;"><div class="card-body">card 4</div></li></ul></div><div class='empty-container'></div> </section>I created a link in codepenhttps://codepen.io/regnas/pen/BaXMZZK
Thank you guys 🙏
example of the result:
