不可思议的纯 CSS 滚动进度条效果(收藏)

本文主要对CSS滚动进度条展示效果，大家也可以一起学习，下面就有详细的解释，另外小编还有一个web交流学习群，都是刚学习前端的小伙伴，大家一起交流，学习，讨论，每天还分享资料笔记视频，欢迎大家的加入点击进入1045267283

问题先行，如何使用 CSS 实现下述滚动条效果？
 

就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。
在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。
OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？
 

分析需求
第一眼看到这个效果，感觉这个跟随滚动动画，仅靠 CSS 是不可能完成的，因为这里涉及了页面滚动距离的计算。
如果想只用 CSS 实现，只能另辟蹊径，使用一些讨巧的方法。
好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成这个效果。分析一下难点：

• 如何得知用户当前滚动页面的距离并且通知顶部进度条？