版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36251118/article/details/80875964
代码如下：
<body>
<div class="progress"></div>
</body>
<style>
.progress{
position:fixed;
top:0;
left:0;
height:3px;
background-color:#0A74DA;
}
body{
height:2000px;
}
</style>
<script>
(function() {
var wh = window.innerHeight;//页面高度
var h = document.body.getBoundingClientRect().height;//body高度
var dh = h - wh;
window.addEventListener('scroll', function() {
window.requestAnimationFrame(function() {
var percent = Math.max(0, Math.min(1, window.pageYOffset / dh));
document.querySelector(".progress").style.width = percent * 100 + '%';
})
}, false);
})();
</script>