卢浮宫的产品页面有一个scroll process bar,可以根据进度条的位置显示百分比。
效果如下
代码如下:
.progress-bar{ width:0; }
<script> window.onscroll = function() {myFunction()}; function myFunction() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("myBar").style.width = scrolled + "%"; } </script>