在WordPress文章的顶部添加彩色进度条,美观实用!
废话不多说,添加以下三处代码即可实现!
- CSS代码:
00FF72、#00C7FF是左右两端的颜色,可以替换成你喜欢的色彩。
/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #00FF72,#00C7FF);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标签下(最后一行)
<div id="percentageCounter"></div>
效果参考本站最顶部
THE END
暂无评论内容