必须用 position: fixed 因为它天然锚定视口顶部，不随滚动偏移；absolute 受限于定位上下文易消失，sticky 无法线性响应滚动进度；fixed 兼容所有现代浏览器，且需 top:0;left:0;right:0;height:2px;z-index:9999。
为什么必须用 position: fixed 而不是 absolute 或 sticky
因为进度条要始终贴着视口顶部，不随页面滚动偏移。absolute 会相对于最近的非 static 祖先定位，一旦父容器有 overflow: hidden 或本身在滚动区域里，进度条就直接消失；sticky 只能在临界点“粘住”，无法响应滚动比例做线性宽度变化。只有 fixed 天然锚定 viewport，兼容所有现代浏览器（包括 iOS Safari 15.4+）。
常见错误是把进度条塞进 <main></main> 或某个 <section></section> 里设 absolute，结果一滚就不见——定位上下文错了。
-
top: 0; left: 0; right: 0; height: 2px;是最简安全写法 - 必须加
z-index: 9999，否则容易被弹窗、广告遮挡 - 移动端建议加
will-change: transform，防 Safari 渲染抖动
width 必须用百分比，且不能直接写 100%
fixed 元素的 width: 100% 是相对于视口宽度，不是页面总高度——它和滚动进度无关。进度条的宽度必须由 JS 动态算出：当前滚动距离 ÷ 可滚动总高度 × 100%。
这个“可滚动总高度”不是 document.body.scrollHeight，而是 document.documentElement.scrollHeight - window.innerHeight。漏减 window.innerHeight 会导致满屏滚动时进度条超 100%。
- 别用
document.body.scrollTop单一来源，优先取document.documentElement.scrollTop，兼容标准模式 - 稳妥写法：
const scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop) - 计算后务必用
Math.min(100, progress)截断，防浮点误差或 iOS Safari 视口缩放导致的溢出
JS 更新 style.width 时的实操细节
每次滚动都直接改 element.style.width = progress + '%' 是最稳定的做法。别用 classList 切换预设 class（触发样式重计算），也别在回调里读 getComputedStyle() 或 offsetHeight（强制同步布局）。
原生 scroll 事件太频繁，尤其 macOS 触控板或 iOS 滚动，每秒可能上百次。但不用一上来就套 lodash.throttle——先确认是否真卡顿。多数情况只需保证：只改 width，不碰其他布局属性，就能跑满 60fps。
- 节流推荐用
requestAnimationFrame包一层，避免掉帧 -
document.documentElement.scrollHeight在 DOM 不变时是静态值，可以缓存，滚动中不必重复读 - 页面不可滚动时（
scrollHeight ≤ clientHeight），应主动设width: 0%，否则会得 NaN 或负值
transform-origin 只在用 scaleX() 时起作用
如果你用 transform: scaleX() 控制进度条宽度，transform-origin 才有意义：它决定缩放的锚点。设成 transform-origin: 0 50%，才能让进度条从左向右“生长”，符合阅读直觉。
但注意：transform-origin 不参与任何滚动计算，也不影响 scrollTop 读取。如果直接用 style.width，它完全无关。
- 别设
transform-origin: 50% 50%，那会让进度条从中间展开，视觉异常 - 用
scaleX()时必须配transform-origin: 0 50%，否则默认从中心缩放 - 纯 CSS 动画加载条（如 NProgress 风格）可用
@keyframes+width，但真实滚动进度条必须 JS 驱动
真正难的不是写几行 CSS，而是处理 iOS Safari 地址栏收起/展开时 window.innerHeight 突变、scrollY 滞后的问题——这会导致进度跳变，需要监听 resize 并重新校准，但很多人连基础百分比都没算对就去优化这个了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
