给自己的typecho网站添加一个顶部阅读进度条的小工具

Respberry Pi
2021-06-25 / 0 评论 / 2 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年06月25日,已超过1007天没有更新,若内容或图片失效,请留言反馈。

啊

前言

之前那不断的完善自己的博客,无意间发现了某些博客顶部会出现阅读进度条的样式,大喜,赶紧搜来看看,但是,无论我是baidu还是google都无法找到合适的插件,大部分都是一些 加载进度条,感觉加载进度条反而会拖慢页面打开的速度,本来渲染就需要时间的,无奈之下,我就自己琢磨了进度条的加载,原理其实很简单

原理

  1. 在每个页面的顶部找到那个div
  2. 在这个div上面挂在一个进度条
  3. 监听浏览器滑动事件,然后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

评论 (0)

取消
0:00