如何在CSS中使用fixed定位制作页面顶部阅读进度条-css教程-PHP中文网

必须用 position: fixed 实现滚动进度条，因其能脱离文档流锚定视口顶部；absolute 受祖先定位影响易消失，sticky 无法驱动连续宽度变化；需用 js 动态计算宽度并节流更新。

如何在css中使用fixed定位制作页面顶部阅读进度条

纯 CSS 无法实现真正反映滚动进度的顶部条——position: fixed 只负责定位，宽度必须由 JS 动态计算并注入，否则它只是个静止的色块。

为什么必须用 `position: fixed`，而不是 `absolute` 或 `sticky`

只有 position: fixed 能绕过文档流、始终锚定在视口顶部，滚动时不受父容器 overflow、transform 或布局变化影响。position: absolute 会相对于最近的非 static 祖先定位，一旦页面有侧边栏固定、主内容区设了 overflow-y: scroll，进度条就直接消失；position: sticky 只在临界点“粘住”，不提供滚动比例，也无法驱动连续宽度变化。

常见错误包括：

把进度条元素塞进 <main></main> 内部再设 absolute，一滚就不见
用 sticky 但没设 top: 0，结果它根本不动
漏写 top: 0 或 left: 0，某些浏览器中默认偏移

`scrollTop` 和 `scrollHeight` 怎么读才可靠

滚动距离不能只看 window.scrollY 或 document.body.scrollTop，前者在部分 iOS Safari 中延迟更新，后者在标准模式下常为 0。真实值应取：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

const scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
const scrollHeight = document.documentElement.scrollHeight;
const windowHeight = window.innerHeight;
const progress = Math.min(100, (scrollTop / (scrollHeight - windowHeight)) * 100);

关键点：

必须用 document.documentElement.scrollHeight，不是 body 的——后者在多数 DOCTYPE 下为 0
必须减去 window.innerHeight，否则满屏滚动时进度超 100%，条会溢出右侧
用 Math.min(100, ...) 防止 iOS Safari 地址栏收起/展开导致的跳变
当 scrollHeight （页面不可滚动）时，强制设 <code>progress = 0，避免 NaN

怎么写样式才能稳住位置又不被遮挡

position: fixed 元素脱离文档流，必须手动补全定位和层叠控制：

显式写 top: 0; left: 0; right: 0;，三者缺一不可——漏 right: 0 在缩放或滚动条出现时可能截断
height 建议设为 2px 或 3px，太细（如 1px）在高分屏上渲染不稳定，太粗像分割线
必须加 z-index: 1000 或更高，否则容易被导航栏、弹窗、第三方 UI 框架（如 Ant Design Modal）遮挡
别给进度条父容器设 transform 或 perspective，否则会创建新包含块，让 fixed 失效（变成相对该容器定位）
移动端加 will-change: transform，缓解 Safari 渲染抖动

JS 更新宽度时最容易卡顿的三个地方

每次滚动都改 style.width 本身开销很小，但连带操作容易触发重排或掉帧：

不要在滚动回调里读 offsetHeight、getComputedStyle() 或其他会触发 layout 的属性
避免用 classList 切换预设 class 控制宽度——会触发样式重计算，不如直接写 element.style.width = progress + '%'
原生 scroll 事件频率极高（尤其 macOS 触摸板），建议用 requestAnimationFrame 节流，确保每帧最多更新一次；别用 debounce，它会让进度条“追不上”快速滚动
缓存 document.documentElement.scrollHeight，DOM 不变时无需重复读取——它是个昂贵的 getter