网站设计细节scroll process bar

页面设计
浏览次数 465

卢浮宫的产品页面有一个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>
我们将在15分钟内联系你

免费提供行业网站方案以及海外推广计划