fixed定位使元素脱离文档流并固定于视口，需显式设置top/right；sticky依赖可滚动祖先且受transform等影响；JS方案最可控但需节流和transform优化。
fixed定位让右侧边栏永远停在视口右上角
用 position: fixed 确实能让右侧边栏“钉”在屏幕某处，但默认会脱离文档流、无视父容器约束，容易和主体内容重叠或遮挡操作区域。
常见错误现象：fixed 元素在页面缩放或滚动时突然“漂移”，或者在移动端 Safari 上不响应点击——因为 fixed 在某些 iOS 版本中需配合 transform: translateZ(0) 触发硬件加速才稳定。
- 必须显式设置
top和right（比如top: 16px; right: 16px;），否则它会默认贴左上角 - 如果主体内容有横向滚动，
fixed元素不会随内容一起滚动，可能错位——它只认视口，不认文档位置 - 若页面存在
transform、perspective或filter的祖先元素，fixed会降级为相对定位（这是 CSS 规范行为，不是 bug）
sticky定位更安全，但触发条件很具体
position: sticky 看似理想，实际依赖父容器高度和滚动上下文。它不是“粘在屏幕”，而是“粘在最近的可滚动祖先内”。很多情况下它根本不动，不是写错了，是没满足前提。
使用场景：适合嵌在主内容流中、随页面滚动到顶部后才“吸顶/吸侧”的侧栏，比如文章页的目录栏。
立即学习“前端免费学习笔记（深入）”；
- 必须设置
top或right（如right: 0;），否则sticky无效 - 父容器不能有
overflow: hidden或overflow: auto且高度不足——这会截断滚动上下文，导致sticky失效 - 在 Firefox 中，如果父容器用了
display: flex且没设明确高度，sticky可能完全不触发 - 兼容性没问题（Chrome 56+/Firefox 59+/Safari 15.4+），但旧版 Safari 需加
-webkit-sticky
滚动时计算偏移量的 JS 方案反而更可控
当 fixed 被父层 transform 干扰，或 sticky 因布局复杂失效时，直接监听 scroll 事件 + getBoundingClientRect() 是最稳妥的兜底方式。
性能影响明显：高频 scroll 事件直接改样式会卡顿，必须节流或用 requestAnimationFrame。
- 不要在
scroll里直接设style.top，改用transform: translateY()，避免触发布局重排 - 判断是否该“吸住”：对比侧栏
getBoundingClientRect().top和视口顶部距离，再结合其原始 offsetTop 动态计算 - 注意 window resize 也要重新计算初始位置，否则窗口缩放后偏移错乱
- 示例核心逻辑：
const sidebar = document.querySelector('.sidebar');<br>let originalTop = sidebar.offsetTop;<br>function updateSticky() {<br> const rect = sidebar.getBoundingClientRect();<br> if (rect.top <= 0) {<br> sidebar.style.transform = `translateY(${Math.max(0, -rect.top)}px)`;<br> } else {<br> sidebar.style.transform = 'none';<br> }<br>}<br>window.addEventListener('scroll', () => requestAnimationFrame(updateSticky));
移动端适配时 fixed/sticky 都可能失效
iOS Safari 对 fixed 和 sticky 的处理尤其保守：地址栏收起/展开会触发视口重算，导致元素跳动；键盘弹出时，fixed 元素可能被顶出可视区且不恢复。
这不是 bug，是 Safari 把“视口”定义得比你想象中更窄——它把地址栏、键盘都算进视口变化里。
- 避免在
input聚焦时依赖fixed侧栏，优先用 modal 或 drawer 替代 - 如果必须用，加
viewportmeta 标签控制缩放：<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> - 测试真机时重点看 Safari，模拟器经常表现正常，但真机上各种意外
真正难的不是选 fixed 还是 sticky，而是搞清当前 DOM 结构里谁是滚动容器、谁加了 transform、谁截断了 containing block——这些细节一错，两个方案都会静默失败。
