fixed定位进度条总在页面顶部不动，因其相对于视口定位且默认锚定top:0；要实现随滚动变化的阅读进度效果，必须用JS监听scroll事件、计算百分比，并通过CSS变量+transform或height动态更新.progress-fill高度，配合transition实现平滑动画。
fixed定位的进度条为什么总在页面顶部不动？
因为position: fixed是相对于视口定位的，不是页面内容。一旦设了top: 0或没设top值，它就死守视口顶部，和滚动完全无关。
要让它“跟着滚动”显示当前阅读进度，必须把它的位置动态算出来——但纯CSS做不到实时计算滚动百分比，所以得靠JS驱动transform或top值。CSS只负责样式和基础定位结构。
- 别用
top: 0+height: 100vh假装是滚动条——那只是个静态条 - 真正响应滚动的进度条，必须监听
scroll事件，读取window.scrollY和document.body.scrollHeight - 推荐用
transform: translateY()更新进度条位置，比改top更高效，避免重排
用CSS变量配合JS更新进度条宽度（不是高度）
垂直滚动进度条本质是「高度变化」，但实现上更稳妥的是控制一个子元素的height（或scaleY），父容器用fixed撑满视口高度。很多人误以为要改进度条自身高度，其实应该改内部填充块。
关键点：用CSS自定义属性传入滚动百分比，让CSS决定视觉长度，JS只负责更新变量值。
立即学习“前端免费学习笔记（深入）”；
- HTML结构建议：
<div class="progress-track"><div class="progress-fill"></div></div>
- CSS里写：
.progress-fill { height: var(--p, 0%); }，然后JS执行el.style.setProperty('--p', scrollPercent + '%') - 别直接用
style.height = ...——那样会覆盖其他height声明，且不利于transition动画 - 加
transition: height 0.2s ease在.progress-fill上，滚动时才顺滑
移动端iOS Safari下fixed元素闪动/错位
iOS Safari对position: fixed有特殊渲染逻辑，尤其在地址栏收起/展开、键盘弹出时，fixed元素可能跳动或脱离预期位置。
- 避免给
.progress-track设top/bottom以外的定位偏移（比如left: 2px），容易触发重绘异常 - 加
will-change: transform到.progress-track，提前告诉浏览器这个元素会频繁变化 - 如果进度条紧贴右侧，用
right: 0比left: calc(100vw - 4px)更稳定 - 测试时务必真机打开，模拟器常不复现该问题
如何让进度条在窄屏上不遮挡内容又保持可读性？
小屏幕宽度下，固定在右侧的细条容易被手指误触，或者和右对齐文字打架。不能简单用display: none一刀切隐藏，得按场景判断。
- 用
@media (max-width: 480px)把进度条宽度从4px扩到8px，提升触控容错 - 在
:hover或:focus-within时才显示完整样式（如加背景色），默认只留1px细线 - 若页面本身有右悬浮按钮（如回到顶部），需用
z-index明确层级，进度条建议设z-index: 99，按钮设更高 - 别依赖
vh单位做高度基准——部分安卓浏览器里100vh会包含地址栏高度，导致条变短
实际滚动中，最常被忽略的是scrollHeight和clientHeight的差值是否稳定——某些框架（如Next.js）在hydrate前后可能造成scrollHeight跳变，导致进度条初始值为0%或100%卡住。得在requestIdleCallback或useLayoutEffect里二次校准。
