[转]一个类似淘宝固定工具条的效果

 

 

Sent to you by M.Zhou via Google Reader:

 

 

一个类似淘宝固定工具条的效果

via WEB前端开发 by 愚人码头 on 10/10/09

在淘宝的列表页上有个列表排序的工具条，这个工具条默认显示是正常的，如图

，当滚动条往下拖动到该工具条的时候，改工具条就会始终固定在浏览器的顶部，就是position:fixed效果。

如图：

在当滚动条往上拖动的时候就会恢复原样，（可能表述不清楚，大家上淘宝自己去看吧。）

以前很讨厌这个效果，不习惯。最近感觉这样的工具条效果还真不错。所以今天尝试的自己弄了一个效果。

主要实现思路：在拖动滚动条的时候比较滚动条卷掉的高度和该工具条元素的Y坐标的值，如果滚动条卷掉的高度大于该工具条元素的Y坐标的值，那么将该工具条元素设置成position:fixed。

查看丑陋的demo：http://www.css88.com/demo/fixedbar/fixedBar.html

这个效果不支持ie6，因为ie6不支持position:fixed，暂时的委屈ie6用户，我恨ie6。

 

 

Things you can do from here:

• Subscribe to WEB前端开发 using Google Reader
• Get started using Google Reader to easily keep up with all your favorite sites