Typecho主题Handsome顶部添加滚动条

29次阅读

没有评论

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

效果

导航栏下会有彩色进度条

方法

在 usr/themes/handsome/component/headernav.php 底部  前添加以下代码

点击展开
```
<div id="percentageCounter"></div>
```

在 主题设置 -> 开发者设置 -> 自定义 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]

在 主题设置 -> 开发者设置 -> 自定义 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]