纯CSS粘性定位堆叠卡片问题：修复卡片穿透粘性头部

问题说明 #

使用position: sticky实现堆叠卡片效果时，卡片完成堆叠后会穿透上方的sticky-header元素，无法像正常滚动那样推动header移出屏幕。

原问题代码 #

CSS #

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

HTML #

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

解决方案 #

核心是调整容器的sticky定位逻辑，让卡片容器与header形成联动，当卡片堆叠完成后，整个容器能推动header移出视口。关键修改如下：

修改后的CSS #

section {
    padding: 6rem 1.6rem;
    max-width: 120rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    min-height: 100vh;
}

h2 {
    font-size: 2.4rem;
}

h3 {
    font-size: 2.4rem;
    color: var(--white);
    margin-bottom: 4rem;
    max-width: 60rem;
}

.sticky-header {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    margin-bottom: 4rem;
}

.process__container {
    width: 100%;
    max-width: 120rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 3rem;
}

.cards-container {
    width: 100%;
    max-width: 90rem;
    padding-bottom: calc(4 * 2rem + 200px);
}

.card {
    position: sticky;
    top: calc(3rem + 4rem + (var(--index) - 1) * 2rem);
    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;
}

关键修改说明 #

1. 调整sticky层级：将.process__container设置为position: sticky，替代原.sticky-header的sticky定位，让header和卡片容器作为一个整体进行sticky联动。
2. 修正卡片top值：卡片的top计算基于父容器的top:3rem，加上header的高度和索引偏移，确保堆叠位置正确。
3. 添加容器底部padding：给.cards-container设置足够的底部padding，当滚动到最后一张卡片时，容器会被推离视口，从而带动header一起移出。
4. 限制section高度：给section添加min-height:100vh，确保sticky容器有足够的滚动空间触发联动效果。

这样修改后，卡片堆叠完成后继续滚动，整个卡片容器会推动header逐渐移出屏幕，符合正常滚动的预期行为。

内容的提问来源于stack exchange，提问作者Silvio Aliatis