position: fixed 是最可靠、最可控的方案；“滚动到某处才固定”需 javascript 监听 scroll 动态切换 absolute/fixed，css 无法按页面滚动距离自动触发，sticky 仅限父容器内滚动且条件苛刻。
直接说结论：position: fixed 是最可靠、最可控的方案；所谓“滚动到一定位置时固定”，本质是用 JavaScript 监听 scroll 事件，动态切换 position: absolute 和 position: fixed，而不是靠 CSS 自动触发。
为什么不能只靠 CSS 实现“滚动到某处才固定”
CSS 本身没有“当元素到达视口某位置时自动改定位”的能力。position: sticky 看似符合，但它只响应**父容器内滚动**，且触发条件苛刻（必须有合规可滚动祖先、top 值、无 transform 干扰），它不会等页面滚到某个全局 offset 才生效——它只在元素自身被滚出其父容器顶部时粘住。所以，真正按「页面滚动距离」来控制固定时机，必须靠 JS。
双重定位的核心逻辑：absolute → fixed → absolute
典型场景是 Banner 下方出现侧边栏，初始随文档流下移（position: absolute），当 Banner 完全滚出视口后，侧边栏切换为 position: fixed 锚定右上角；快到底部时再切回 position: absolute 避免遮挡页脚。关键不是“怎么写”，而是“什么时候切”：
-
getBoundingClientRect().top≤ 0 时，说明侧边栏顶部已触顶 → 切 fixed -
window.innerHeight + window.scrollY ≥ document.body.scrollHeight - 80（留 80px 页脚间距）→ 切回 absolute - 切换前必须记录原始
top值（如el.offsetTop），否则 fixed 后位置漂移 - 避免在
scroll里直接操作style.position，用 class 切换更易维护和加 transition
容易踩的坑：fixed 被“框住”或跳动
即使 JS 逻辑正确，position: fixed 也可能失效或错位，常见原因：
- 侧边栏任意祖先（包括
body）有transform、will-change: transform或filter→ fixed 变成相对该祖先定位，不是视口 - 移动端 Safari 视口高度变化（地址栏收起/键盘弹出）导致
100vh失准 → 改用height: 100%+min-height: 100vh更稳 - 没给 fixed 元素设
z-index，被其他层叠上下文盖住 → 至少设z-index: 1000 - 主内容没预留空间，被 fixed 侧边栏覆盖 → 必须用
margin-right（右侧栏）或margin-left（左侧栏）手动撑开
要不要用 position: sticky 替代？
除非你明确需要“只在父容器内滚动时粘住”，否则别强求 position: sticky。它对布局约束太重：父容器必须有明确高度和 overflow-y: auto，且不能有任何 transform/filter 干扰。真实项目中，JS 控制的双重定位反而更可控、兼容性更好，尤其在需要响应式宽度变化或与页脚留白联动时。
真正难的不是写几行 JS，而是把滚动阈值、定位锚点、视口变化、层级关系这四件事同时理清楚——漏掉任何一个，侧边栏就会突然消失、错位或卡死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
