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