网站设计细节scroll process bar

卢浮宫的产品页面有一个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>