前端开发 滚动进度条效果

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

<body>
    <div class=”progress”></div>
</body>
<style>
    .progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        background-color: #0A74DA;
    }
    body {
        height: 2000px;
    }
</style>
<script>
    (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及前景分享

» 本文来自:前端开发者 » 《前端开发 滚动进度条效果》
» 本文链接地址:https://www.rokub.com/4924.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!