进度条练习
<style>
*{
margin: 0;
padding: 0;
}
.progressbar{
height: 3px;
background: skyblue;
position: fixed;
top: 0;
left: 0;
width: 30%;
}
</style>
<div class="progressbar"></div>
<div style="height: 2000px;"></div>
<script>
window.onscroll = ()=>{
let scrollTop = Math.floor(document.documentElement.scrollTop)
let macScrollTop = document.body.offsetHeight - window.innerHeight
let percent = (scrollTop * 100 / macScrollTop) + '%'
document.querySelector('.progressbar').style.width = percent
}
</script>