前端开发滚动进度条效果

前端开发项目经理岗位职责|2018web前端开发前景|前端融资和开发贷区别
预览效果时先点击右边的全屏浏览按钮，然后再滚动鼠标

<body>

</body>

<style>

.progress {

position: fixed;

top: 0;

left: 0;

height: 3px;

background-color: #0A74DA;

}

body {

height: 2000px;

}

</style>

(function () {

var wh = window.innerHeight;

var h = document.body.getBoundingClientRect().height;

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>

关于前端开发的前景|前端开发发展前景|前端的开发ppt及前景分享