通过为标题单独设置 position: sticky 并合理控制粘性区域边界，可实现标题始终显示直至所有 sticky 卡片完全滚出视口。
通过为标题单独设置 `position: sticky` 并合理控制粘性区域边界，可实现标题始终显示直至所有 sticky 卡片完全滚出视口。
在构建内容驱动型卡片布局（如安全特性介绍、功能亮点展示等）时，常需让标题与卡片形成“视觉绑定”：标题应持续固定在视口顶部，直到最后一张 sticky 卡片的底部也刚好离开视口，而非过早消失。原方案中将整个 .cards-list 设为 sticky 会破坏内部滚动流，而直接对卡片应用 position: sticky 又无法约束标题行为——核心问题在于：sticky 元素的粘性范围由其最近的滚动祖先决定，且每个 sticky 元素独立计算脱离时机。
✅ 正确解法是分离职责：
- 将标题（
.cards-header）设为独立 sticky 元素，top: 0； - 卡片（
.card）保持原有position: sticky; top: 80px； - 关键点：确保
.cards-header和.card处于同一块级格式化上下文（BFC）中，且容器无overflow: hidden/clip等截断行为，使浏览器能正确计算标题的“粘性生命周期”。
以下是精简可靠的实现代码：
.cards-header {
position: sticky;
top: 0;
background: #d32f2f; /* 视觉区分，可按需调整 */
padding: 1.5rem;
margin-bottom: 1rem;
z-index: 10;
}
.card {
height: 200px;
border: 1px solid #333;
background: #ff9800;
position: sticky;
top: 80px; /* 与页面导航栏高度对齐 */
margin-bottom: 1rem;
}
<div class="cards-list">
<div class="cards-header">
<h3>Your security prioritized</h3>
<p>Have peace of mind knowing your data is safe and not being fed into open AI models...</p>
</div>
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</div>
⚠️ 注意事项：
-
不要给
.cards-list设置overflow: hidden或display: flex/grid（除非明确处理轴向），否则可能触发新的 BFC，导致 sticky 失效或范围异常； - 标题的
z-index应高于卡片，避免被遮挡； - 若页面有固定头部（如导航栏），
top: 0的标题会与其重叠，此时应设top: [导航高度]（如top: 64px），并与卡片的top值对齐； - 所有 sticky 元素必须位于可滚动的祖先容器内（通常是
或自定义overflow-y: auto区域），否则不会触发粘性行为。该方案兼容现代浏览器（Chrome 56+、Firefox 59+、Safari 15.4+），无需 JavaScript，纯 CSS 驱动，性能优异且语义清晰。
