本文详解如何让长内容区块在滚动至其底部时才触发 sticky 行为（即“底部吸附”），而非默认的顶部吸附；提供纯 css 思路分析与可靠的 javascript 动态方案，并兼容窗口缩放。
CSS 的 position: sticky 本质上只支持基于视口边界（top、bottom、left、right）的单向吸附，且无法直接实现“当元素底部到达视口底部时才开始 sticky”这一逻辑——因为 sticky 的触发锚点是元素的指定边（如 top: 0 表示上边缘贴顶），而浏览器不提供“基于元素自身高度动态计算粘性临界点”的原生能力。
你遇到的问题正源于此：当 section { height: 200vh; position: sticky; top: 0; } 时，元素一进入视口就立即贴顶，导致内部滚动被阻断；而最后一节看似“正常”，实则是因内容未超出视口，误打误撞符合了预期行为。
✅ 可靠解法：JavaScript 动态设置 top 值
核心思路是：让 sticky 元素在自身底部与视口底部对齐的瞬间开始吸附，即设置 top = 视口高度 - 元素自身高度。此时，元素会自然“悬浮”于底部，随滚动向下推移，直到其底部完全离开视口下沿才停止 sticky。
function updateStickyTop() {
document.querySelectorAll(".item").forEach(el => {
const vh = window.innerHeight;
el.style.top = `${vh - el.offsetHeight}px`;
});
}
// 初始化 + 响应式更新
updateStickyTop();
window.addEventListener('resize', updateStickyTop);配套 CSS（简洁关键）：
.item {
position: sticky;
width: 100%;
height: 200vh; /* 可任意长 */
}
.item img {
width: 100%;
height: 100%;
object-fit: cover;
}HTML 结构保持语义清晰：
<section class="item"> <img src="https://picsum.photos/id/128/800" alt="Section 1"> </section> <section class="item"> <img src="https://picsum.photos/id/48/800" alt="Section 2"> </section> <section class="item"> <img src="https://picsum.photos/id/42/800" alt="Section 3"> </section>
⚠️ 注意事项：
- offsetHeight 包含 border 和 scrollbar（如有），若需像素级精准，可改用 getBoundingClientRect().height；
- 若页面存在横向滚动或复杂布局（如 transform 父容器），需额外校验 getBoundingClientRect() 的 bottom 值；
- 纯 CSS 方案目前无标准解：@container 查询、scroll-driven animations（SDF）等新特性尚不支持 sticky 位置动态绑定，bottom: 0 在长容器中会失效（因 sticky 优先级低于 top）。
? 总结：该 JS 方案轻量、兼容性好（支持所有现代浏览器）、可维护性强。配合 resize 监听，完美覆盖响应式场景。如未来 CSS scroll-timeline 与 sticky 深度整合，或可回归纯样式方案——但当下，动态 top 计算是最务实、最可控的实现路径。
