博客阅读进度条

<div id="percentageCounter"></div>

<!-- 阅读进度条开始 -->
<style type="text/css">
    #percentageCounter{
        position:fixed; 
        left:0; top:0; 
        height:3px; 
        z-index:99999; 
        /*绿红色*/
        /*background-image: linear-gradient(to right, #339933,#FF6666);*/
        /*白蓝色*/
        background-image: linear-gradient(to right, #E8EAF6,#C5CAE9,#9FA8DA,#7986CB,#5C6BC0,#3F51B5,#3949AB,#303F9F,#283593,#1A237E);
        border-radius:5px;
    }
</style>

<script type="text/javascript">    
    $(window).scroll(function() {
        var a = $(window).scrollTop(),
        c = $(document).height(),
        b = $(window).height();
        scrollPercent = a / (c - b) * 100;
        scrollPercent = scrollPercent.toFixed(1);
        $("#percentageCounter").css({
            width: scrollPercent + "%"
        });
    }).trigger("scroll");
</script>
<!-- 阅读进度条结束 -->