狐狸聚合登录,欢迎各位站长接入!

子比主题美化 – 顶部添加彩色进度条

免费领流量卡 流量卡包邮 本站同款主题 广告招租

效果预览

图片[1] - 子比主题美化 – 顶部添加彩色进度条 - 狐狸资源网

部署教程

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

在主题目录header.php中,添加以下代码,放在body标签下(最后一行)

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

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

本文最后更新于2024-08-18 20:19:46,若文章内容或链接失效,请 留言 QQ群 反馈!
© 版权声明
THE END
如果喜欢,可以【点赞】【分享】【收藏】
点赞0赞赏 分享
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容