纯css堆叠卡片效果带粘性位置，无javascript

Question

我正在研究这些卡片堆叠的部分，问题是他们使用位置：粘性来做到这一点，当卡片的效果结束时，卡片会穿过“粘性标题”，我希望它们离开屏幕，就像卡片推动“粘性标题”一样，就像正常行为一样。

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

<style>
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;
   }

我在codepen中创建了一个链接 https://codepen.io/regnas/pen/BaXMZZK

谢谢大家🙏

结果示例

Answer 1

尝试这些更改：（将它们添加到现有属性中）

.sticky-header {
   z-index:6;
   width:100%;
   background: #00060D;
   top: 0;
}