position: sticky 未生效的主因是 top 未设置、父容器 overflow 或 transform 等样式中断滚动上下文，或 top 使用百分比等无效值；需确保最近可滚动祖先为非 static 定位且未被截断。
position: sticky 是最轻量、最语义化的方案，但直接写就生效？不是。90% 的“不吸顶”问题出在 top 漏设、父容器干扰或滚动上下文被意外切断。
为什么写了 position: sticky 却没反应
浏览器看到 position: sticky 但没配 top（或 bottom/left/right），会直接降级为 position: relative，完全无粘性行为。
- 打开 DevTools → Elements → Computed 面板，确认
position最终值是不是sticky；如果不是，说明被祖先节点覆盖或重置了 -
top值必须是明确单位（px、rem、env()），禁用百分比（top: 10%无效） - 不能同时写
top和bottom，部分浏览器整条声明忽略
父容器哪些样式会让 position: sticky 失效
position: sticky 的吸附范围由**最近的、可滚动的、非 static 定位祖先**决定。中间任何一层破坏这个链路，就失效。
-
overflow: hidden、overflow: clip或高度受限的overflow: auto父容器，可能截断滚动流，导致 sticky 提前终止 -
transform、filter、will-change会创建新层叠上下文，间接让 sticky 失效 - Flex 或 Grid 容器作父级时，若未显式设
align-items: flex-start，子元素默认居中，top: 0缺失参照基准 - 快速验证：临时给导航栏父级加
border: 1px solid red，滚动看边框是否随页面动——如果不动，它就是滚动容器；如果动了，说明滚动发生在更外层
怎么设 top 值才对
top 不是“固定在顶部多少像素”，而是“滚动到距离视口顶部多少像素时开始吸附”。它的实际效果取决于滚动上下文和父容器行为。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 纯导航栏吸顶：
top: 0，最直观也最稳定 - 上方有固定通知条（64px 高）：
top: 64px，避免遮挡 - iOS Safari 地址栏遮挡场景：用
top: env(safe-area-inset-top)更可靠 - 想实现“滚动到底部才吸附”（如表格底部汇总行）：需 JS 动态计算
top，等于window.innerHeight - element.offsetHeight，纯 CSS 无法自适应视口变化
当 position: sticky 真的不行时，用 JS 监听 scroll 降级
IE 不支持 sticky；嵌套滚动容器（如侧边栏内独立 scroll 区）、或父级用了 transform 且无法改结构时，就得手动控制。
- 核心逻辑：监听
scroll，检查element.getBoundingClientRect().top <= 0 - 必须给主体内容预留空间，否则 fixed 后内容会上移被遮盖：
margin-top或padding-top至少等于导航栏高度 - 若导航栏高度不固定（如响应式菜单展开），JS 必须动态读取
offsetHeight，不能硬编码 - 注意性能：别在 scroll 回调里频繁操作 DOM 或触发重排，用
requestAnimationFrame节流
真正难的不是写那几行 CSS，而是定位哪一层父容器悄悄拦住了滚动流——它往往藏在某个 UI 框架的重置样式里，或者被一个 transform: translateY(0) 意外触发了层叠上下文。
