粘性区块滚动组件（sticky 卡片堆叠滚动，偏移/高度实时可调）

效果演示（真实可交互）

完整代码

核心原理只有一个属性：position: sticky。元素在滚动到指定偏移量前保持正常文档流位置，到达后「钉」在滚动容器顶部；多个粘性元素依次出现时，后一个会把前一个向上顶，形成层层堆叠的卡片塔。

<div class="view">
  <div class="intro">向下滚动 ↓</div>
  <section class="card card--1"><h3>粘性区块 01</h3></section>
  <section class="card card--2"><h3>粘性区块 02</h3></section>
  <section class="card card--3"><h3>粘性区块 03</h3></section>
  <div class="outro">滚动结束 ↑</div>
</div>

.view {
  height: 470px;               /* 滚动容器必须有确定高度 */
  overflow-y: auto;            /* 让内容在容器内滚动 */
  padding: 12px 16px;
}
.card {
  position: sticky;            /* 关键属性：粘性定位 */
  top: 10px;                   /* 钉在容器顶部时的偏移 */
  height: 152px;               /* 卡片自身高度 */
  margin-bottom: 16px;         /* 卡片间距 */
  border-radius: 16px;
  background: linear-gradient(150deg, #6c8cff, #a96cff);
  color: #fff;
  padding: 20px;
}

无需任何 JavaScript，即可实现滚动堆叠。若需要响应偏移与高度，只需把 top 与 height 换成 CSS 变量，由 JS 滑块写入即可（演示组件即如此实现）。

参数说明

兼容性与性能

• position: sticky 已获 Chrome 56+、Firefox 32+、Safari 13+（iOS 13+）全量支持，无需前缀
• 纯 CSS 实现，无 JS 逐帧计算、无事件监听，性能开销几乎为零，滚动完全交由浏览器合成器处理
• 粘性元素的祖先链上不能有 overflow: hidden/auto 的中间层，否则会失效（详见常见问题）
• 演示使用内嵌竖向滚动容器，方便在页面内直接预览堆叠效果
• 对无障碍友好：卡片为正常文档流元素，读屏器可按顺序朗读全部内容

常见问题

Q: sticky 完全不生效是什么原因？ 三个最常见原因：一是祖先元素设置了 overflow: hidden（sticky 会退化为 relative），二是粘性元素与容器之间没有足够的滚动空间（容器高度太小），三是 top 未设置——sticky 必须搭配 top/left/right/bottom 之一才会生效。

Q: 为什么卡片堆叠时会出现闪烁或跳动？ 多为 margin-bottom 与卡片高度比例不当导致。建议卡片高度 ≥ 两倍间距，并给卡片加 border-radius 与阴影增强层次感，视觉上会更稳定。

Q: 想让粘性区块固定在页面视口而不是容器内怎么做？ 把滚动容器换成 body 本身即可，sticky 相对最近的滚动祖先工作；若页面本身就是滚动主体，sticky 元素会相对视口钉住。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，改色、改高度、增减区块数量均无限制。