00:00/
发布于2017-02-06 / 1932次浏览
2017/2/8更新
参考本站顶部固定滚动条
今天在逛素锦的博客时,他的文章页面的顶部有一个很有趣的动态滚动条。会根据窗口滚动条的位置而变化。扒了半天扒不下来,于是自己动手做了一个,哈哈,不得不说又学到了很多东西。
<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>
.scrollbar{
position:fixed;
top:0;
height:3px;
background:#BEBEBE;
transiton-property:width,background;
transition-duration:1s,1s;
z-index:99999;
}
<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
好想法,我的只是一个颜色,你这个变色想法不错,表示借鉴一下
谢谢分享!
@小向 常来逛逛~~