Typecho主题Handsome顶部添加滚动条

86次阅读
没有评论

共计 834 个字符,预计需要花费 3 分钟才能阅读完成。

效果

导航栏下会有彩色进度条

方法

  1. usr/themes/handsome/component/headernav.php 底部 <!-- / navbar collapse --> 前添加以下代码

    <div id="percentageCounter"></div>
  2. 主题设置 -> 开发者设置 -> 自定义 JavaScript中插入以下代码
    [hide]

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

    [/hide]

  3. 主题设置 -> 开发者设置 -> 自定义 CSS中插入以下代码
    [hide]

    // 加载显示
    #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;
    }

    [/hide]

完成

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

正文完
觉得有用?欢迎赞赏,感谢!
post-qrcode
 0
苏维歌
版权声明:本站原创文章,由 苏维歌 于2022-05-05发表,共计834字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码