导航栏滚动卡住是因fixed未预留顶部空间，应给内容加margin-top；sticky更自然但需父容器无height/overflow限制；移动端需用dvh并避免嵌套；scroll-timeline仅Chromium支持，多数项目仍依赖JS。
导航栏在滚动时卡住不动，但内容能正常滚动
这是最常见的“固定导航栏”误操作结果：用了 position: fixed 却没预留顶部空间，导致正文从页面顶端开始渲染，被导航栏盖住。关键不是“怎么固定”，而是“固定后怎么让内容避开它”。
- 给
<header>或导航容器加position: fixed; top: 0; width: 100%; z-index: 1000; - 紧接着，在
<main>或第一个主要内容区块上加margin-top，值等于导航栏高度（比如64px）——不能靠padding-top，否则滚动条会出现在导航下方，视觉错位 - 如果导航高度响应式变化（如移动端变矮），用
margin-top: clamp(48px, 5vh, 64px)比纯 px 更稳妥
滚动到某区域后才让导航栏吸顶（sticky 效果）
position: sticky 是更自然的方案，它只在滚动到临界点时才“粘住”，不抢占文档流，也不需要手动算 margin。但它有严格前提：父容器必须有明确高度且不能是 overflow: hidden。
- 导航栏本身设
position: sticky; top: 0; - 它的直接父元素（比如
<header>）**不能**设height、max-height或overflow: hidden，否则 sticky 失效 - 若父容器是 flex 容器，确保它没有
align-items: center这类让子元素居中的设置，否则 sticky 元素可能被挤出视口 - 兼容性注意：IE 完全不支持，iOS Safari 旧版本需加
-webkit-sticky
导航栏随滚动轻微上移或透明度渐变
纯 CSS 实现滚动感知效果，不需要 JS。核心是利用 scroll-timeline + @keyframes，但目前仅 Chromium 115+ 支持；更通用的做法是用 scroll-margin-top 配合 :target 或监听 scroll 事件——但后者属于 JS 范畴。这里只说纯 CSS 可行路径：
- 用
scroll-timeline定义滚动范围：@scroll-timeline nav-reveal { source: selector(html); start: 0; end: 100px; } - 给导航栏加动画：
animation: slideIn 0.3s linear forwards; animation-timeline: nav-reveal; - 当前绝大多数项目仍依赖 JS 监听
scroll，用requestAnimationFrame更新transform或opacity——因为 CSS scroll-timeline 尚未进标准，Firefox/ Safari 均未实现
移动端 Safari 中导航栏闪烁或跳动
iOS Safari 的滚动行为和渲染管线特殊：地址栏收起/展开会触发 viewport 高度突变，导致 fixed 或 sticky 元素重排。这不是 bug，是设计使然。
立即学习“前端免费学习笔记（深入）”；
- 避免在导航栏内用
height: 100vh，改用min-height: 100vh或height: 100dvh（dvh是动态 viewport height，Safari 16.4+ 支持） - 禁用
body { overscroll-behavior: none; }有时能缓解，但会同时禁用下拉刷新 - 最稳方案：导航栏用
position: sticky，并确保其父容器是<body>直接子元素——不要嵌套在<div id="app">里，否则 iOS 可能无法正确计算 sticky 区域
滚动吸顶看似简单，真正麻烦的是各种浏览器对 fixed 和 sticky 的解析差异，还有 viewport 高度在移动设备上的不可靠性。动手前先确认目标浏览器列表，比写十行 CSS 更重要。
