做一个网页阅读百分比指示器

今天看了些阮一峰的博客，发现他的页面上有一个页面阅读百分比的指示器，兴起自己用Jquery页做了一个，比较简单，show the code

 <!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <link rel="stylesheet" href="">
        <style type="text/css" media="screen">
        header {
                position: fixed;
                top: 0;
                left: 0;
                z-index: 1;
                width: 100%;
                background: #fff;
                border-bottom: 1px solid #ccc;
        }
        
        .header-proper {
                width: 80%;
                margin: 0 auto;
        }
        
        .scroll-line {
                height: 4px;
                margin-bottom: -2px;
                background: blue;
                width: 0%;
        }
        
        .content {
                padding: 100px 0;
                margin: 0 auto;
                width: 80%;
                height: 2000px;
                background-color: #1CB225;
        }
        
        .headline {
                font-size: 60px;
                line-height: 66px;
        }
        </style>
</head>

<body>
        <header>
                <div class="header-proper">
                        <h1 class="logo">ScrollIndicator</h1>
                </div>
                <div class="scroll-line"></div>
        </header>
        <div class="main">
                <div class="content">

                </div>
        </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).scroll(function() {
        var wintop = $(window).scrollTop(),
                docheight =$(document).height(),
                winheight = $(window).height();
        var scrolled = (wintop / (docheight - winheight)) * 100;
        $('.scroll-line').css('width', (scrolled + '%'));
});
</script>
</html>

效果如下了

posted @ 2017-02-14 15:49  unsignedu  阅读(296)  评论(0)  编辑  收藏  举报