Fixed定位导航宽度塌陷应避免width:100%，改用left/right约束或max-width+transform居中；滚动进度条需JS计算scrollTop/(scrollHeight-innerHeight)，用transform:scaleX()更新并节流，两者共存时注意z-index和iOS兼容性。
Fixed定位下导航宽度塌陷怎么办
用 position: fixed 做吸顶导航时，如果没设宽度或设了 width: 100%，它会撑满整个视口，而不是父容器——这和你想要的「跟内容区对齐」完全相反。
常见错误现象：nav 吸顶后变宽、遮挡侧边栏、文字换行错乱；尤其在响应式布局里，一滚动就露馅。
- 别直接写
width: 100%，它参考的是 viewport 宽度，不是内容区宽度 - 用
left和right配合margin-left/margin-right把导航“卡”进内容区：比如内容区左右各有20px内边距，就设left: 20px; right: 20px; - 若内容区用
max-width+margin: 0 auto居中，导航也得同步：设max-width相同值，并加margin: 0 auto;，但注意fixed元素脱离文档流，auto水平居中需配合left: 50%和transform: translateX(-50%)
进度条怎么跟着滚动实时更新
纯 CSS 实现不了滚动进度计算，必须用 JS 读取 scrollY 和 document.body.scrollHeight，再把比值映射到进度条宽度。
容易踩的坑是直接用 window.innerHeight 当作“可视高度”参与计算——其实应该用 document.body.scrollHeight - window.innerHeight 作为可滚动总高度，否则顶部/底部留白会导致进度条提前 100% 或卡在 90% 不动。
立即学习“前端免费学习笔记（深入）”；
- 监听
scroll事件，但记得节流（比如用requestAnimationFrame包一层），不然 iOS Safari 会掉帧 - 进度条 DOM 推荐用伪元素
::after或单独<div class="progress-bar">，避免影响导航结构语义<li>更新时只改 <code>width或transform: scaleX()，后者性能更好（触发合成层）
简短示例：
const bar = document.querySelector('.progress-bar');<br>function updateProgress() {<br> const scrollTop = window.scrollY;<br> const maxScroll = document.body.scrollHeight - window.innerHeight;<br> const percent = Math.min(100, (scrollTop / maxScroll) * 100);<br> bar.style.transform = `scaleX(${percent / 100})`;<br>}<br>window.addEventListener('scroll', updateProgress);
Fixed导航与滚动进度条如何共存不打架
两者都依赖 scroll 事件，但更新逻辑不同：导航要吸顶（靠 CSS），进度条要算值（靠 JS）。关键矛盾在于 z-index 层级和滚动抖动。
典型问题：进度条盖住导航文字、滚动瞬间导航跳动、iOS 上 fixed 元素闪烁。
- 给导航设
z-index: 1000，进度条设z-index: 999，且进度条用position: fixed; top: 0;紧贴顶部，别嵌套在导航内部 - 导航本身加
will-change: transform或backface-visibility: hidden减少重绘，尤其在有阴影或圆角时 - iOS Safari 对
fixed+transform组合敏感，进度条别用transform: translateY()做垂直偏移，改用top配合height
移动端适配时百分比宽度失效的根源
所谓“百分比 css 宽度”，在 position: fixed 下根本不会继承父元素宽度——它只认 viewport。所以指望 width: 80% 跟内容区对齐，本质就是错的。
真正可靠的方案是放弃“百分比宽度”，转而用定位约束边界，或者用 JS 动态读取内容区 getBoundingClientRect() 的 left/right 值来设置 left/right。
- 如果内容区是
container类名，且有固定 padding，优先用left: calc(50% - 480px)（假设内容区宽 960px）+width: 960px，比百分比更可控 - 不要在
fixed元素上同时用width和left+right，浏览器会按规范忽略width - viewport meta 标签必须存在且正确：
<meta name="viewport" content="width=device-width, initial-scale=1">，否则移动端100vw会错乱
复杂点在于：滚动进度条的精度受设备 DPR、缩放、地址栏显隐影响，scrollHeight 在某些安卓 WebView 里返回 0，得加兜底判断。这些细节不处理，用户一拉到底，进度条就卡在 95%。
