Wordpress美化 给子比zibll主题顶部添加一个滚动进度条 浏览进度百分比

前言:

由于本站刚换上了子比zibll主题,所以没事就想美化美化,昨天蓝米兔逛网站的时候发现有个博客的顶部有进度条,感觉还挺好看的,于是今天就扒了过来,嘿嘿!直接上图吧。看了截图还不知道的话,滚动的时候就看本站顶部吧。。。

截图:

Wordpress美化 给子比zibll主题顶部添加一个滚动进度条 浏览进度百分比 图一

教程:

打开 子比主题设置-全局功能-自定义代码,放入以下代码,保存后强制刷新下浏览器就能看到效果了。

自定义CSS样式:

/*顶部滚动条*/
#percentageCounter{
  position:fixed; 
  left:0; 
  top:0; 
  height:3px; 
  z-index:99999; 
  background-image: linear-gradient(to right, #339933,#FF6666);
  border-radius:5px;
}

自定义javascript代码:

//顶部进度条加载显示
$(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");

自定义头部HTML代码:

<!--顶部滚动条-->
<div id="percentageCounter"></div>

最后我猜你需要一张图

Wordpress美化 给子比zibll主题顶部添加一个滚动进度条 浏览进度百分比 图二
© 版权声明
THE END
喜欢就支持一下吧
点赞11赞赏
分享
评论 抢沙发

请登录后发表评论