sticky不会导致页面内容“突然上移”，因其未触发时仍参与文档流、保留占位；fixed则一设即脱离文档流，原始位置被后续元素填补；常见“跳动”实为父容器塌陷或margin引发重排，非sticky失效。

sticky不会导致页面内容“突然上移”

因为 position: sticky 在未触发前仍参与文档流，保留自身高度和占位；而 position: fixed 一设即脱离文档流，原始位置立刻被后续元素填补。常见错误是给导航栏加了 sticky 后滚动时页面“跳一下”，其实不是 sticky 失效，而是父容器高度塌陷、或兄弟元素用了 margin 导致布局重排——你得检查它前面有没有清浮动、父容器是否设置了 min-height 或内容撑高。

sticky只在最近可滚动祖先内生效，无需手动监听 scroll

一个 .sidebar { position: sticky; left: 0; } 元素，如果放在

内，它只会在该 div 内部横向吸附；一旦滚出这个 div 的可视区域，它就退回 relative 行为。而 fixed 永远相对于 viewport，不管嵌套多深、有没有 iframe。这意味着：

• 用 sticky 做表格表头，能随 tbody 滚动自然进出吸附状态
• 用 fixed 做同样效果，就得手动监听 scroll、计算 offsetTop、判断是否进入视区，代码量和维护成本明显更高
• iOS Safari 对父容器的 overflow: hidden 特别敏感，哪怕只是某个中间祖先写了它，sticky 就直接失效

sticky不依赖视口绑定，移动端滚动更稳定

fixed 在 iOS Safari 和部分安卓 WebView 中常出现“滚动卡顿”“输入框聚焦时错位”“地址栏收起后定位偏移”等问题，因为其强绑定 viewport 的机制与原生滚动优化存在冲突；而 sticky 因为始终依附于局部滚动容器，在这些场景下更稳定。但要注意：

• 它依赖父容器有明确滚动上下文，不能靠 body 直接滚动（iOS 上 body 滚动常被降级处理）
• 若滚动容器是 div，需确保它有 height 或 max-height + overflow-y: auto，不能只靠 overflow: scroll
• 不要指望 sticky 在 transform: translateZ(0) 强制硬件加速的容器里还能正常工作——某些旧版 Chromium 会静默禁用它

sticky单向指定阈值，天然规避复杂层叠干扰

sticky 必须且只能指定 top、bottom、left、right 中的一个值，比如 top: 10px 或 left: 20px，不能同时写 top 和 left（否则整个声明被忽略）；fixed 则无此限制，top: 10px; left: 20px; 是合法且常用的。这决定了：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• sticky 更适合单边吸附（如顶部导航、左侧目录）
• fixed 更适合精确锚定（如右下角悬浮按钮、带偏移的 tooltip）
• 如果你试图用 sticky 实现“既贴顶又靠右”，得靠父容器 padding 或 flex 布局配合，不能靠定位属性硬塞

真正容易被忽略的是：sticky 的“粘性”行为完全取决于父容器是否构成有效的滚动上下文——它不像 fixed 那样自带 fallback，一旦父容器高度不足、overflow 被截断、或嵌套了 transform，它就悄无声息地退化成 relative，连 warning 都不报。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！