↑就是这样的↑
将下方代码放到头部HTML代码内
<div id="percentageCounter"></div>
将下方代码放到哪都可以 其实我也不知道行不行
绿红色的
<!-- 阅读进度条开始 -->
<style type="text/css">
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
</style>
<script type="text/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");
</script>
<!-- 阅读进度条结束 -->
白蓝色的
<!-- 阅读进度条开始 -->
<style>
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #E8EAF6,#C5CAE9,#9FA8DA,#7986CB,#5C6BC0,#3F51B5,#3949AB,#303F9F,#283593,#1A237E);border-radius:5px;}
</style>
<script type="text/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");
</script>
<!-- 阅读进度条结束 -->
评论 (0)