CoreNext主题美化:顶部彩色滚动进度条

前言:

一个比较好看的顶部彩色滚动进度条。

新建HRMdbjdt.js代码:

//顶部彩色滚动进度条_xjvae博客[www.xjvae.com]
$(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");

 插入页脚代码:

<!--顶部进度条页脚js_xjvae[www.xjvae.com]-->
<script src="你的站点/js/HRMdbjdt.js"></script>
<!--顶部进度条页脚js_xjvae[www.xjvae.com]-->

 插入页头代码:

<!--顶部彩色进度条_xjvae[www.xjvae.com]-->
<div id="percentageCounter"></div>
<!--顶部彩色进度条_xjvae[www.xjvae.com]-->

 实际效果:

图片[1]-CoreNext主题美化:顶部彩色滚动进度条-一闲笔记

 

 

 

来源参考:

好软猫https://www.haoruanmao.com

温馨提示: 本文最后更新于2024-02-22 16:40:49,某些文章具有时效性,若有错误或已失效,请在下方留言或联系一闲笔记
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容