为网站顶部添加彩色进度加载条

广30/

简要介绍

进入本站阅读文章时,你会发现随着你的阅读,本站顶部的进度条随之改变,今天就分享给大家

效果如下

图片[1]-为网站顶部添加彩色进度加载条-凌云博客

代码分为三部分,请仔细阅读下方代码和教程。

第一段CSS代码

可直接放到全局CSS文件内,一般模板全局CSS文件名为main.css

为网站顶部添加彩色进度加载条此处内容已隐藏,评论后刷新即可查看!

第二段JS代码

放到全局JS文件内一般模板全局JS文件名为main.js

//进度条加载显示$(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\");

第三段Html代码

放到网站模板footer.php文件内就行了

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

广30/

© 版权声明
THE END
喜欢就支持一下吧
点赞184 分享
风言风语 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片