AI摘要

本文介绍了子比主题网站顶部添加彩色进度条的美化方法，只需通过添加自定义CSS设置进度条样式、添加JavaScript代码实现滚动百分比动态计算，并在header.php的body标签下或自定义HTML处插入指定div代码即可完成部署。

效果图

部署流程

[hidecontent type="logged"]
  • 自定义CSS
  • 自定义javascript
    • /*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
    //进度条加载显示
$(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");

    在主题目录header.php中，添加以下代码，放在body标签下（最后一行）

    放到这儿也可 自定义底部HTML代码

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

    [/hidecontent]