为网站顶部添加彩色进度条
介绍
进入本站阅读文章时，你会发现随着你的阅读，本站顶部的进度条随之改变，今天就分享给大家
效果如下
效果图
代码如下
代码分为三部分，请仔细阅读下方代码和教程。
第一段CSS代码
/*进度条加载显示*/
#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。
第二段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");Joe主题可直接放到全局设置的自定义JS
Joe主题可直接放到全局设置的自定义JS
第三段Html代码
<div id="percentageCounter"></div>
插入到 <head></head> 之间，Joe主题可放入全局设置的自定义增加<head></head>中
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-06-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录