诺兰网 - 只为资源而生-分享永无止境 - 专注优质源码/电脑软件/活动资讯/技术教程分享

网站顶部怎么添加进度加载条代码

编辑:诺兰网 分类:代码教程 首发 阅读量:208 次
扫码手机访问
0
摘要:今天分享的代码为网站增加一个顶部进度条代码 顶部进度条演示 进度条需要自行美化  #percentageCounter { position: absolute; left: 0; bottom: -1px; height: ...

今天分享的代码为网站增加一个顶部进度条代码

顶部进度条演示

进度条需要自行美化 

#percentageCounter { position: absolute; left: 0; bottom: -1px; height: 3px; z-index: 2; background-color: var(--theme); }

调用代码(在需要显示的增加以下代码)

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

进度条代码 (这是js代码 增加到公共js,或者在<script>***</script>增加)

$(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");
阅读时间:

字数统计:本文共有 512 个字

本文标题:《网站顶部怎么添加进度加载条代码》发布于2022-10-23 13:36:36

版权声明:文章由《诺兰网》发布、原创转载请保留出处!

本文链接:https://www.nuolanyl.com/post-2141.html

上一篇
镇魂街预约领2元红包和2Q币活动
下一篇
php代码:怎么用代码判断IP地址是否内网IP

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:68407578@qq.com

同类推荐

最新文章

评论列表
签到

小姐姐视频

热门文章

随机推荐

标签云

代码教程 网站顶部怎么添加进度加载条代码
今天分享的代码为网站增加一个顶部进度条代码 顶部进度条演示 进度条需要自行美化  #percentageCounter { position...
扫描二维码阅读原文
诺兰网 January, 01
生成社交图 ×