position: fixed 最直接兼容，需加 padding-top 防遮挡、width: 100vw 防缩放偏差；position: sticky 是临界吸附，易因父容器 overflow/transform 或无滚动而失效。

position: fixed 是最直接、兼容性最好的方案，只要注意内容遮挡和响应式适配，就能稳定工作；position: sticky 更“智能”，但失效场景多，不能只靠它——尤其在嵌套滚动或旧版 Safari 中。

用 position: fixed 实现不抖动的固定导航

它让元素脱离文档流、相对于视口定位，滚动时完全不受干扰。但容易忽略两个关键点：

• 必须给 或主内容区加 padding-top（值 = 导航栏实际高度），否则第一屏内容会被盖住
• 别在导航上设 margin-top —— fixed 元素的 margin 不影响布局，只可能造成视觉错位
• 移动端需加 width: 100vw 而非 100%，防止因 viewport 缩放或横向滚动导致宽度计算偏差
• 如果页面用了 transform（比如轮播图动画）、filter 或 perspective，父容器会创建新层叠上下文，可能让 fixed 元素 z-index 表现异常 —— 此时显式加 z-index: 1000 并确保父级没设 overflow: hidden

position: sticky 为什么写了 top 却不粘？

它不是“固定”，而是“临界吸附”：只有当元素被滚动到其包含块顶部（或 bottom）时才触发。常见失效原因：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 父容器没有可滚动内容，或者高度是 auto 且子元素没撑开它 → 滚动事件根本没发生，sticky 不会激活
• 父容器设了 overflow: hidden、transform、filter 或 perspective → sticky 失效（这些属性会创建新的格式化上下文）
• 导航栏在 直接子级，但 或 设了 overflow: hidden → 视口无法滚动，sticky 无从谈起
• top 值写成 0 但前面有 banner，结果 banner 滚走后才吸附 → 应该设 top: -[bannerHeight]px 让它提前入场

滚动监听 + JS 切换 fixed 的坑在哪？

适合需要延迟固定（如 banner 播放完再吸附）、或兼容 IE/旧 Safari 的场景，但极易写出卡顿代码：

• 别在 scroll 回调里直接读 offsetTop 或写 style.position —— 强制同步布局计算，iOS 上掉帧明显
• 用 getBoundingClientRect().top 替代 <code>window.scrollY > threshold，更可靠（避免因 header 高度变化导致阈值漂移）
• 必须节流：用 requestAnimationFrame 包一层，或至少用 setTimeout + 标志位防高频触发
• 切换时别只改 position，要同步控制 top 和 left，否则在 flex/grid 容器中可能水平偏移（尤其有 justify-content: center 时）

双滚动容器下 fixed/sticky 混用要注意什么？

比如整个页面可上下滚动，内部又有个 <div class="list"> 自带 <code>overflow-y: auto，你希望列表里的标题 sticky —— 这时它的滚动容器是那个 .list，不是 window。

• 若想让它相对视口固定，就得用 fixed，但要注意：fixed 元素脱离的是最近的「定位上下文」，不是最近的滚动容器
• 如果 .list 父级有 transform，而你又对标题用了 fixed，它可能被截断在 transform 区域内（尤其 iOS Safari）
• 此时更稳妥的做法是：把标题抽离出 .list 结构，用 JS 动态计算它在视口中的位置并更新 top 和 left，而不是依赖 CSS 定位

真正难的从来不是写对那一行 position: sticky 或 fixed，而是搞清它被谁滚动、被谁裁剪、被谁挡住 —— 尤其在复杂嵌套、多滚动区域、或强制硬件加速的页面里。