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

发布于2017-02-06 / 1932次浏览

2017/2/8更新

效果演示

参考本站顶部固定滚动条

前言

今天在逛素锦的博客时，他的文章页面的顶部有一个很有趣的动态滚动条。会根据窗口滚动条的位置而变化。扒了半天扒不下来，于是自己动手做了一个，哈哈，不得不说又学到了很多东西。

JS代码

<script type="text/javascript"> 
$(window).scroll(function(){
 var s=$(window).scrollTop();
 var a=$(document).height();
 var b=$(window).height();
 var result=parseInt(s/(a-b)*100);
 $("#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");
});
</script>

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>

分析

为了方便，这次用了jquery进行各项操作。(其实是自己不熟悉原生js)

对于滚动条颜色的变化，用了jq来判断width的值来改变css样式。不得不说这次对IE兼容性不错，这也出乎了我的意料。

var s=$(window).scrollTop();//滚动条和顶部的距离，默认单位:px. 所以当$(window).scrollTop()的值等于0时，就表示滚动条在最顶部。

var a=$(document).height();//页面文档的总高度

var b=$(window).height();//窗口能显示的最大高度

页面文档高度-窗口的最大高度=s的最大值。即滚动条需要滚动的最大距离

所以s/(a-b)就是滚动条相对于窗口的百分比。 知道百分比后，我们就可以写各种动画来实现我们需要的效果。

这里用css3的transition过渡属性，可以让滚动条看上去不那么僵硬。

没有用animation动画，所以颜色变化看上去很突兀，有时间在改啦~

说真的排版真的好丑，代码阅读性也太差，过段时间试着换个主题吧。。(用上了以前的highlight)

后语

代码做了极度精简，所以没有考虑兼容性的问题。但实际测试chrome内核和IE 10都能很好的支持。

取消回复

▼

^_^

3 条评论