侧边栏壁纸
博主头像
iColak's Blog博主等级

人生来来往往,来日并不方长

  • 累计撰写 106 篇文章
  • 累计创建 31 个标签
  • 累计收到 382 条评论

目 录CONTENT

文章目录

Typecho主题Handsome顶部添加滚动条

苏维歌
2022-05-05 / 2 评论 / 0 点赞 / 9 阅读 / 1336 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-07-05,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

效果

导航栏下会有彩色进度条

方法

  1. usr/themes/handsome/component/headernav.php底部前添加以下代码
    [collapse status="false" title="点击展开"]

    [/collapse]

  2. 主题设置->开发者设置->自定义JavaScript中插入以下代码
    [hide]
    [collapse status="false" title="点击展开"]

    //加载显示
    $(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");

    [/collapse]
    [/hide]

  3. 主题设置->开发者设置->自定义CSS中插入以下代码
    [hide]
    [collapse status="false" title="点击展开"]

    //加载显示
    #percentageCounter {
     position: absolute;
     z-index: 1;
     left: 0;
     bottom: -3px;
     height: 3px;
     border-radius: 1.5px;
     background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff);
     transition: width 0.45s;
    }

    [/collapse]
    [/hide]

完成

[scode type="share"]转载自:https://cmsblog.cn[/scode]

0
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin
  3. QQ打赏

    qrcode qq

评论区