为网站顶部添加彩色进度条
侧边栏壁纸
  • 累计撰写 88 篇文章
  • 累计收到 673 条评论
  • 今日更新 0 篇文章

为网站顶部添加彩色进度条

七年
2021-06-13 / 0 评论 / 113 阅读 / 正在检测是否收录...

前言

我们去访问别人网站的时候,经常会看见彩色进度条,觉得很好看,也想在自己的网站添加一个。今天我就在某网站把这个彩色进度条扒了下来,分享给你们。

效果图

Test

教程开始

先把下面的CSS代码放到你网站的CSS里面,JS同理

  • CSS代码
/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
  • 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");

然后把下面的代码放到的<head></head>里面即可

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

七年博客 - 你的专属归

https://www.qin0.cn/
更多精彩文章,按Ctrl+D收藏本站!

评论 (0)

取消
在线人数:1人