个人博客导航底部滚动条显示位置百分比的图文教程

最近有网友反馈喜欢本站导航栏底部滚动条显示位置百分比的特效，让我弄个教程，其实这个是很简单的，网上有很多教程，基本都是html+js+css，按照操作就行了，好吧，今天抽空把这个教程分享一下，声明，原作者是谁不详，所以也不知道应该感谢哪位大神，帅气的特效，我也喜欢这个，哈哈哈。。。

好了，教程很简单，在网站添加html代码，然后在js添加监测代码，最后用css显示出来.

首先打开模板的header.php文件，复制以下代码，粘贴在网页之后，

<div id="percentageCounter"></div>  

其次找到网站的JS代码，编辑JS文件，这个js文件一定要是全局的通用的，如果不知道的话，那就放在公共底部网页（footer.php）模板里，代码如下：

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

如果放在里JS里面，切记要删除第一段和最后一段的代码，否则格式错误，无法运行，然后保存代码。

最后一步找到网站的所属的css样式文件，在里面添加如下样式代码（单独一行放在哪都行），代码如下：

#percentageCounter {
    position:fixed;
    left:0;
    top:0;
    height:3px;
    z-index:99999;
    background-color:#448EF6;
}

保存css文件即可，另外如果不确定是哪个css样式文件的话，可以放在style.css里面或者主题的自定义css里面。

原文链接: https://www.talklee.com/blog/502.html