个人头像

柠檬酸

9月前来过

控制台
欢迎来到我的博客!
默认封面

00:00/

播放列表

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

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

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都能很好的支持。

最后修改于:2017年2月8日 下午10:14

喜欢 0
TAGS:  暂无标签
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。 转载请注明出处链接 : css3+jquery实现颜色渐变滚动条

3 条评论

  1. 房东的猫 说道: 来自 Google Chrome 56.0.2924.87 in Windows 7
    2017-03-19 14:48

    好想法,我的只是一个颜色,你这个变色想法不错,表示借鉴一下

  2. 小向 说道: 来自 Google Chrome 50.0.2661.102 in Windows 7
    2017-02-10 13:41

    谢谢分享!