进入本站阅读文章时,你会发现随着你的阅读,本站顶部的进度条随之改变,今天就分享给大家
代码分为三部分,请仔细阅读下方代码和教程。
/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
Joe主题可直接放到全局设置的自定义CSS。
Joe主题可直接放到全局设置的自定义CSS。
//进度条加载显示
$(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");
Joe主题可直接放到全局设置的自定义JS
Joe主题可直接放到全局设置的自定义JS
<div id="percentageCounter"></div>
插入到 <head></head>
之间,Joe主题可放入全局设置的自定义增加<head></head>中