Typecho主题Handsome顶部添加滚动条

效果

导航栏下会有彩色进度条

方法

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]