在淘宝的列表页上有个列表排序的工具条,这个工具条默认显示是正常的,如图
,当滚动条往下拖动到该工具条的时候,改工具条就会始终固定在浏览器的顶部,就是position:fixed效果。
如图:
在当滚动条往上拖动的时候就会恢复原样,(可能表述不清楚,大家上淘宝自己去看吧。)
以前很讨厌这个效果,不习惯。最近感觉这样的工具条效果还真不错。所以今天尝试的自己弄了一个效果。
主要实现思路:在拖动滚动条的时候比较滚动条卷掉的高度和该工具条元素的Y坐标的值,如果滚动条卷掉的高度大于该工具条元素的Y坐标的值,那么将该工具条元素设置成position:fixed。
查看丑陋的demo:https://www.7psus5.com/demo/fixedbar/fixedBar.html
这个效果不支持ie6,因为ie6不支持position:fixed,暂时的委屈ie6用户,我恨ie6。
我喜欢用改className的方式
以前还真没注意到这里 学习。。。
是呀。fix,IE6它老人不支持!
滚动到下面就不对咯,出现了”1111″
好文章
这个效果不错,用起来很舒服
回4楼:那不是bug,是另外一个用于测试的层……看下源码就知道了
可惜ie6不支持
恩浩东西 谢谢了 要是IE6能支持就 太好了
代码写得不错
如果想让IE6也支持的话该怎么弄啊?
百度有啊很久就有这个工能了。