刚开始的时候我也觉得不可能，但是就是这么神奇，总有大神给你意想不到的惊喜。
快来感受一下把。（仔细看看头部黄色条的变化）
思考一下啊，怎么出现的那，其实作者使用了一点小技巧，那就是背景色渐变和遮挡产生的视觉效果。
再来欣赏一个图片，大概你就明白了。
看到了把，其实就是内容区域的背景色的渐变黄色部分，然后蒙层遮挡住露出顶部5px，显示背景色，产生的进度条效果。来代码
<style> body{ background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%); background-size: 100% calc(100% - 100vh + 5px); background-repeat: no-repeat; } body::after{ content:""; position: fixed; top:5px; left: 0; right: 0; bottom:0; background: #fff;/* 这里设置白色就好了 */ z-index: -1; } P{ font-size: 100px; } </style>
<body>
<div class="pic-wrap">
<p>好好好好好好好好好好好好好好好</p>
<p>好好好好好好好好好好好好好好好</p>
<p>好好好好好好好好好好好好好好好</p>
<p>好好好好好好好好好好好好好好好</p>
</div>
</body>
这个background-size为什么这么设置啊？
就是根据你滚动的距离设置的，因为背景色的高度肯定要跟你滚动的距离保持一致啊；
我这里就是超出可视区的部分，才会产生滚动条，所以是(100% - 100vh + 5px)；
敲一下就明白了，赶快试试把！！！！