本文详解如何让长内容区块在滚动至视口底部时自动吸附固定，支持内部滚动且兼容响应式，提供纯 css 方案与健壮的 javascript 实现。
在网页设计中，“底部吸附”（bottom-sticky）是一种常见但原生 CSS 并未直接支持的交互效果：我们希望某个高度远超视口（如 200vh）的 <section> 在其底部即将离开视口底部时开始固定，同时允许用户继续向下滚动查看其内部剩余内容——这不同于 position: sticky; top: 0（顶部吸附），也不同于 position: fixed（脱离文档流、无法内部滚动）。
❌ 常见误区：top: 0 无法实现底部吸附
使用 position: sticky; top: 0 会让元素在滚动到顶部时立即吸附，导致长区块（如 200vh）一进入视口就“卡死”，用户无法向下滚动浏览其后半部分内容。这正是提问者遇到的问题：前两个 section 完全遮挡了后续滚动，仅最后一个看似正常——实则是因无后续内容而产生错觉。
✅ 正确思路：动态计算 top 值，使元素在底部对齐视口底边时开始粘住
CSS 的 sticky 行为由 top（或 bottom）阈值触发：当元素的指定边界（如 top 边）到达其最近的滚动祖先（通常是视口）对应边界时，即进入粘性状态。因此，要实现“底部吸附”，需设置：
section {
position: sticky;
top: calc(100vh - 100%); /* 关键！让 bottom 边缘对齐视口底部时触发 sticky */
height: 200vh;
}✅ 纯 CSS 解法（推荐，无需 JS）
利用 calc(100vh - 100%) 是核心技巧：
- 100vh 是视口高度；
- 100% 是该 section 自身高度（在文档流中已知）；
- 差值即为该元素底部距离视口顶部的距离，恰好是触发“底部吸附”的理想 top 值。
完整 CSS 示例：
section {
position: sticky;
top: calc(100vh - 100%);
height: 200vh;
width: 100%;
}
section img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 背景色示意 */
section:nth-of-type(1) { background: rgb(225, 204, 200); }
section:nth-of-type(2) { background: rgb(240, 216, 163); }
section:nth-of-type(3) { background: rgb(192, 211, 217); }HTML 结构保持简洁：
<section> <img src="https://picsum.photos/id/128/800/300" alt="Section 1"> </section> <section> <img src="https://picsum.photos/id/48/800/300" alt="Section 2"> </section> <section> <img src="https://picsum.photos/id/42/800/300" alt="Section 3"> </section>
✅ 优势：零 JS、响应式天然支持（vh 和 % 均随窗口重绘实时更新）、语义清晰、性能优异。
⚠️ 注意事项与兼容性
- 浏览器支持：position: sticky 已被所有现代浏览器（Chrome 56+、Firefox 59+、Safari 15.4+、Edge 79+）全面支持，CanIUse 数据显示全球覆盖率 >98%。
- 父容器要求：sticky 元素必须有可滚动的祖先（如 <body> 或自定义 overflow-y: auto 的容器），且不能有 transform、filter 等创建新层叠上下文的属性干扰。
- calc(100vh - 100%) 中的 100% 指该元素自身高度，在标准文档流中完全有效，无需 JS 测量。
?️ 备选方案：JavaScript 动态设置（仅作补充）
若因极端场景需 JS 控制（如需兼容极老浏览器或复杂嵌套滚动），可采用提问者提供的思路，但需增强健壮性：
function updateStickyTop() {
document.querySelectorAll("section").forEach(el => {
const vh = window.innerHeight;
el.style.top = `${vh - el.offsetHeight}px`;
});
}
// 初始化 + 响应式监听
updateStickyTop();
window.addEventListener('resize', () => requestAnimationFrame(updateStickyTop));⚠️ 注意：此方案需确保 el.offsetHeight 可靠获取（建议在 DOM 加载完成后执行），并用 requestAnimationFrame 避免 resize 频繁触发重排。
✅ 总结
- 首选纯 CSS：position: sticky; top: calc(100vh - 100%); 是最简洁、高效、可维护的底部吸附解法；
- 避免滥用 JS：除非有特殊交互动效需求，否则无需引入脚本；
- 测试关键点：在不同屏幕尺寸、移动端 Safari（注意 iOS vh 在地址栏收放时的抖动）、以及内容高度动态变化的场景下验证表现。
掌握这一技巧，即可轻松构建沉浸式长页面（如产品介绍、故事叙述、艺术画廊），让用户自然滚动、精准锚定，体验流畅不中断。
