css3 + jquery 实现颜色渐变滚动条

js 代码

$(window).scroll(function(){
 var s=$(window).scrollTop();//滚动条和顶部的距离，默认单位:px. 
//所以当$(window).scrollTop()的值等于0时，就表示滚动条在最顶部。
 var a=$(document).height();//页面文档的总高度
 var b=$(window).height();//窗口能显示的最大高度
//页面文档高度-窗口的最大高度=s的最大值。即滚动条需要滚动的最大距离
 var result=parseInt(s/(a-b)*100);
//所以s/(a-b)就是滚动条相对于窗口的百分比。 
 $("#bar").css("width",result+"%");
 if(result>=0&&result<=19)
 $("#bar").css("background","#cccccc");
 if(result>=20&&result<=39)
 $("#bar").css("background","#50bcb6");
 if(result>=40&&result<=59)
 $("#bar").css("background","#85c440");
 if(result>=60&&result<=79)
 $("#bar").css("background","#f2b63c");
 if(result>=80&&result<=99)
 $("#bar").css("background","#FF0000");
 if(result==100)
 $("#bar").css("background","#5aaadb");
});

css 代码

.scrollbar{
 position:fixed;
 top:0;
 height:3px;
 background:#BEBEBE;
 transiton-property:width,background;
 transition-duration:1s,1s;
 z-index:99999;
}

html 代码

<div class="scrollbar" id="bar" style="width:0%"></div>