前言

站长搭建好网站，需要更多美化的时候，在顶部加上这个彩色进度条是不是非常的好看。今天来全面的教程，静态和动态的哦

使用方法

代码如下

代码分为三部分，请仔细阅读下方代码和教程。

1、CSS代码，主题的添加到全站CSS样式表代码里面

/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}

2、JS代码，添加到主题的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");

3、在主题的主目录找到header.php，进入后在里面添加如下代码

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

还有一种是非主题的网站，或者你的网站比较老不支持Javascript样式表添加

直接在主题或者网站的CSS文件夹添加如下代码

/* 顶部边栏加横条美化*/
/*----www.maomaodn.cn----*/
.header {
background: #fff url('https://image.baidu.com/search/down?url=https://tvax3.sinaimg.com/large/006VCrUsgy1fjmflvz3z7j30ag0040pv.jpg') repeat-x 0 100%;//此处应替换为对应网站的图片链接
}

温馨提示：若内容/图片/下载链接失效，请点击AI人工客服，或者评论此文章或登录后留言给站长。

本文结束END

---