My own Scroll Indicator!

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/u013560932/article/details/69666866

codepen前十第六名Scroll Indicator非常好看，一处非常小的细节，但是给整个页面带来了简洁的效果。
总之就是很不错，我很喜欢。我连手机电量都是细条显示。
原链接：http://codepen.io/derekjp/pen/pJzpxB ;
原链接挂掉了，想看自己找吧。
仿了一个
效果图：

原来的那个纯CSS做的，所以才能得第六名，我十分菜鸡，看不懂他的CSS啥意思。
就自己写了一个，jQuery的！！！
为了让大窗小窗都看的过得去，简单拟合了一下，
分了分情况。
因为我无法获取滚动条的长度，难以置信怎么有这么傻的设定。
HTML :

<div class="col-xs-9"  style="background:#09F;display:block; z-index:10; position:fixed; top:0; float:left; width:0%; margin-left:0;;" id="line"></div>

JS：

$(document).ready(function(e) {
    var dom_h,sco_h,percent,dom_w,line_w,win_h;
    $(document).scroll(function(){
    dom_h=$(document).height(); 
    sco_h=$(document).scrollTop(); 
    dom_w=$(document).width();
    win_w=$(window).width();
    if (win_w>1000)
    {
    percent=sco_h/(dom_h*0.8)*100;
    line_w=dom_w*percent/100;
    $("#line").width(line_w);
    }
    if(win_w<1000)
    {
    percent=sco_h/(dom_h)*100;
    line_w=dom_w*percent/100;
    $("#line").width(line_w);
    }
        });

}); 

引用文件：bootstrap.min.css的样式，非必要，只是因为它的蓝色很好看，我喜欢。
jQuery,啥都别说。

开玩笑哈。我还得老老实实去学Node.js,Anjs,React。。。。

——————————后记———————————
以上代码bug层出，根本不能做到自适应满蓝条，因为不会计算滚动条滑块的长度。
自己改了很长时间未果，百度如何获取滚动条长度未果后，寻找到别人的效果
连接：http://es6.ruanyifeng.com/ 这个页面的滚动条也是蓝色线条的，翻看他的代码，

然后翻看js，在ditto.js里找到他的代码，非常短。

复制到自己的代码里，然后发现文章太短之后有bug，再补上一句话

if (document.documentElement.clientHeight > document.documentElement.offsetHeight) 
    {
    $("#line").width($(document).width());   
    }

其中line是我的线div的id
整体代码：

//当页面没有滚动条的时候直接把蓝条填满
    if (document.documentElement.clientHeight > document.documentElement.offsetHeight) 
    {
    $("#line").width($(document).width());   
    }
    else{
    (function() {
      var $w = $(window);
      var $prog2 = $('#line');
      var wh = $w.height();
      var h = $('body').height();
      var sHeight = h - wh;
      $w.on('scroll', function() {

          var perc = Math.max(0, Math.min(1, $w.scrollTop() / sHeight));
          updateProgress(perc);

      }); 

总结：阮一峰果然是新手之友，什么东西都能从他那抄来:>
EOF