一个类似淘宝固定工具条的效果
时间：2009年10月10日作者：愚人码头查看次数:10,092 views评论次数：13
在淘宝的列表页上有个列表排序的工具条，这个工具条默认显示是正常的，如图
，当滚动条往下拖动到该工具条的时候，改工具条就会始终固定在浏览器的顶部，就是position:fixed效果。
如图：
在当滚动条往上拖动的时候就会恢复原样，（可能表述不清楚，大家上淘宝自己去看吧。）
以前很讨厌这个效果，不习惯。最近感觉这样的工具条效果还真不错。所以今天尝试的自己弄了一个效果。
主要实现思路：在拖动滚动条的时候比较滚动条卷掉的高度和该工具条元素的Y坐标的值，如果滚动条卷掉的高度大于该工具条元素的Y坐标的值，那么将该工具条元素设置成position:fixed。
查看丑陋的demo：http://www.css88.com/demo/fixedbar/fixedBar.html
这个效果不支持ie6，因为ie6不支持position:fixed，暂时的委屈ie6用户，我恨ie6。
声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《一个类似淘宝固定工具条的效果》
如果你读了我的文章，觉得有帮助： 
说明
说明
发表评论
我喜欢用改className的方式
[回复]
以前还真没注意到这里 学习。。。
[回复]
是呀。fix，IE6它老人不支持！
[回复]
滚动到下面就不对咯，出现了”1111″
[回复]
好文章
[回复]
这个效果不错，用起来很舒服
[回复]
回4楼：那不是bug，是另外一个用于测试的层……看下源码就知道了
[回复]
可惜ie6不支持
[回复]
恩浩东西 谢谢了 要是IE6能支持就 太好了
[回复]
代码写得不错
[回复]
如果想让IE6也支持的话该怎么弄啊？
[回复]
百度有啊很久就有这个工能了。
[回复]