头部进度条随滚动轴变化而变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .bar{
            position: fixed;
            top:0;
            left:0;
            width:0%;
            height:10px;
            background: #aa2;
        }
        .container{
            width:100%;
            height:2000px;
            background: #fff;
        }
    </style>
</head>
<body>
    <div class="bar"></div>
    <div class="container"></div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        var windowHeight=$(window).height();
        var documentHeight=$(document).height();
        //console.log(windowHeight);
        //console.log(documentHeight);
        $(window).scroll(function(){
            var scrollHeight=$(document).scrollTop();
            //console.log(scrollHeight);
            var n=documentHeight-windowHeight;
            var bili=scrollHeight/n;
            console.log(bili*100+"%")
            $(".bar").width(bili*100+"%");
        })
    })
</script>
</html>

你可能感兴趣的:(前端,前端)