前言
之前那不断的完善自己的博客,无意间发现了某些博客顶部会出现阅读进度条的样式,大喜,赶紧搜来看看,但是,无论我是baidu还是google都无法找到合适的插件,大部分都是一些 加载进度条,感觉加载进度条反而会拖慢页面打开的速度,本来渲染就需要时间的,无奈之下,我就自己琢磨了进度条的加载,原理其实很简单
原理
- 在每个页面的顶部找到那个
div
- 在这个
div
上面挂在一个进度条 - 监听浏览器滑动事件,然后js控制进度条的宽度
代码
let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollAvail = pageHeight - windowHeight;
$('.joe_header__below').append('<div class="progress-top" style="width: 0%; height: 5px;border-radius: 5px;background-color: #29A6FF;"></div>')
window.onscroll = function () {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop);
document.querySelector('.progress-top').style.width = (scrollTop / scrollAvail) * 100 + '%';}
是不是很简单,有点基础的一下就能看懂
操作
将这段代码粘贴到自己主题的全局样式上就可以食用。注意 我绑定的是 我的Joe
主题,挂载在 joe_header__below
上,自己主题自己找哦,不懂的请留言把
结束
特意写长一点来体验一下我的定制进度条把!
评论 (0)