sticky侧边栏滚到底部“穿出去”是因为它只在最近可滚动祖先内生效，不感知页脚；需设父容器max-height+overflow-y:auto，并加占位元素或padding-bottom来停驻。
为什么 sticky 侧边栏滚到底部就“穿出去”了
不是 CSS 写错了，而是 position: sticky 本身不感知页脚位置——它只在父容器滚动范围内生效，一旦侧边栏内容高度小于父容器可滚动高度，它就会一路滚到容器底端并消失。常见于 main 或 section 这类未设 max-height 的块级容器，浏览器根本不知道“该在哪停”。
关键点在于：sticky 的粘性边界由**最近的可滚动祖先容器**决定，不是整个页面；而页脚（footer）通常在文档流底部，与侧边栏无直接容器关系，CSS 无法自动对齐两者。
- 侧边栏父容器没设
max-height或height→ 滚动上下文无限，sticky 一直滚到底 - 父容器用了
overflow: hidden或隐式触发层叠上下文（如transform、filter）→ sticky 被静默降级为static - 忘了写
top值（比如只写了position: sticky）→ 默认top: auto，不触发粘性
用父容器约束 + 占位元素实现“停在页脚前”
想让侧边栏离页脚还有 20px 就停下，不能靠 bottom: 20px——它只在容器支持 bottom 方向粘性时才有效（且需容器本身有明确滚动边界），而绝大多数布局不满足。更可靠的做法是：控制父容器的可用滚动高度，并在底部加占位。
- 给侧边栏的直系父容器（如
.sidebar-container）设max-height: calc(100vh - 64px - 20px)（减去顶部导航高和页脚预留空隙） - 同时设
overflow-y: auto，确保它成为有效的滚动上下文 - 在侧边栏内部末尾插入一个占位
<div style="height: 20px"></div>，或给父容器加padding-bottom: 20px - 侧边栏自身必须设
position: sticky和具体top值（如top: 64px）
这样，侧边栏滚动到底时，占位区域会顶住页脚，视觉上自然“停住”，且无需 JS 干预。
fixed 方案下如何手动对齐页脚
如果选 position: fixed（推荐多数场景），它锚定视口而非文档流，页脚位置无法自动响应。必须靠 JS 监听滚动并动态计算最大 top 值，否则侧边栏会遮挡页脚。
- 先获取页脚的
offsetTop和高度：const footer = document.querySelector('footer'); const footerTop = footer.offsetTop; const footerHeight = footer.offsetHeight; - 监听
scroll，计算侧边栏允许的最大top：Math.min(window.pageYOffset + 64, footerTop - sidebar.offsetHeight - 20)（64 是导航栏高，20 是预留空隙） - 用
element.style.top = computedTop + 'px'实时更新，注意防抖（节流至 16ms）
这个逻辑比 sticky 更可控，但多一层 JS 维护；移动端需额外处理 resize 和键盘弹起导致的视口变化。
双向粘性（如 Twitter）需要 JS 驱动
原生 sticky 只能单向锚定（top 或 bottom），无法在向下滚动时吸附顶部、向上滚动时回弹归位。要实现“滚到底部后停住，向上滚立即跟回”，必须用 JS 判断方向并切换定位策略。
- 记录上一次
scrollY，对比当前值判断滚动方向 - 向下滚动时添加
.scroll_down类，设top: auto; bottom: 0;（锚定底部） - 向上滚动时移除该类，恢复
top: 64px;（锚定顶部） - 父容器仍需满足 sticky 基础条件：有
max-height、无overflow: hidden、未触发新层叠上下文
真正容易被忽略的是：这种双向行为依赖父容器滚动范围精确匹配主内容高度，一旦主内容动态加载（如分页、懒加载），必须重新计算容器高度并重置 sticky 状态——否则会卡在错误位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
