前言：

由于本站刚换上了子比zibll主题，所以没事就想美化美化，昨天鹏星逛网站的时候发现有个博客的顶部有进度条，感觉还挺好看的，于是今天就扒了过来，嘿嘿！直接上图吧。看了截图还不知道的话，滚动的时候就看本站顶部吧。。。

截图：

教程：

打开 子比主题设置-全局功能-自定义代码，放入以下代码，保存后强制刷新下浏览器就能看到效果了。

自定义CSS样式：

/*顶部滚动条*/
#percentageCounter{
  position:fixed; 
  left:0; 
  top:0; 
  height:3px; 
  z-index:99999; 
  background-image: linear-gradient(to right, #339933,#FF6666);
  border-radius:5px;
}

自定义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");

自定义头部HTML代码：

<!–顶部滚动条–>

<!--顶部滚动条-->
<div id="percentageCounter"></div>

最后我猜你需要一张图: