本文介绍如何利用CSS position: sticky 与精确的 top 偏移值，使两个不同高度的并排 <div> 在滚动时同步移动，并在较短容器触底后自动吸附至视口底部，直至较长容器滚动结束。
本文介绍如何利用css `position: sticky` 与精确的 `top` 偏移值，使两个不同高度的并排 `
` 在滚动时同步移动，并在较短容器触底后自动吸附至视口底部，直至较长容器滚动结束。
要实现两个并排 <div> 的协同滚动行为——即：二者初始同步滚动；当较短容器（如 120vh）内容滚动到底部时，它应“悬停”于视口底部，而较长容器（如 200vh）继续滚动，直到其自身到底；此后页面恢复常规滚动——关键在于避免依赖 JavaScript，纯 CSS 可解。
核心思路是：对两个子容器均应用 position: sticky，并通过计算 top 值，使较短元素在滚动中“延迟脱离”视口，从而模拟“触底吸附”效果。
✅ 正确实现方式
首先明确：sticky 元素的 top 值定义的是其距离其最近定位上下文（通常是视口）顶部的最小偏移量。当元素滚动到该偏移位置时开始粘性定位；而当其父容器或自身内容不足以支撑继续粘附时，它会自然脱离。
由于 .left 高 200vh、.right 高 120vh，二者差值为 80vh。但注意：我们希望 .right 在滚动约 80vh 后“卡住”在底部——即当 .left 还剩 80vh 未滚动完时，.right 应已抵达底部并停止移动。
立即学习“前端免费学习笔记（深入）”；
因此，将 .right 的 top 设为 -20vh 并非随意取值，而是基于如下推导：
- 视口高度设为 100vh；
- .right 高 120vh，意味着其底部比顶部多出 120vh；
- 要使其底部随 .left 底部同步对齐，需让 .right 的粘性锚点下移，等效于“提前触发粘性”，常用技巧是使用负 top 值补偿；
- 实测验证：top: -20vh 可使 .right 在滚动约 100vh 后开始贴底，并持续至 .left 滚动完最后 80vh，完美匹配预期行为。
完整代码如下：
.parent {
display: flex;
}
.child {
display: flex;
flex-direction: column;
justify-content: space-between;
position: sticky; /* 关键：两列均启用 sticky */
}
.left {
background: lightblue;
height: 200vh;
}
.right {
background: lightcoral;
height: 120vh;
top: -20vh; /* 核心偏移值：使右侧列延迟脱离，实现底部吸附 */
}<div class="parent">
<div class="child left">
<div>Top (Left)</div>
<div>Bottom (Left)</div>
</div>
<div class="child right">
<div>Top (Right)</div>
<div>Bottom (Right)</div>
</div>
</div>⚠️ 注意事项与兼容性提示
- sticky 依赖父容器无 overflow 隐藏：确保 .parent 或其祖先元素未设置 overflow: hidden/auto/scroll，否则 sticky 将失效。
- 浏览器支持良好：Chrome 56+、Firefox 59+、Safari 15.4+、Edge 79+ 均原生支持；旧版 Safari 需加 -webkit-sticky 前缀（可选）。
- top 值需实测微调：-20vh 是基于 120vh vs 200vh 的典型解，若实际高度变化（如 150vh / 300vh），请按公式 top = -(taller - shorter - 100vh) 重新计算（单位 vh），再结合调试工具校准。
- 勿混用 flex 与 sticky 的冲突布局：本例中 .child 同时使用 display: flex 和 position: sticky 完全兼容；但若内部嵌套复杂滚动容器，建议避免在 sticky 元素上设置 height: 100% 等可能干扰粘性行为的属性。
该方案轻量、高性能、无需监听 scroll 事件，是现代 CSS 实现“异高容器协同滚动”的优雅实践。
