初探淘宝查询的方便功能

上了一下淘宝查询商品界面,发现了一个很方便的功能,分析一下哦


初始界面:

初探淘宝查询的方便功能

 

 

 

下拖滚动条时:

初探淘宝查询的方便功能

 

 

 

 

可见一些便捷的过滤条件会始终保留在页面顶部,很实用,很方便。



用ie6 , firefox3.5 ,chrome2看了下,taobao很大胆的忽略了ie6,确实是国内web开发所少见的,想起了曾经看过的 关于经济舱与vip舱 的比喻,没想到taobao真的这么做了,只能说很前卫了。


初步分析实现要点:


1.监控scroll事件,控制操作区域。

2.利用 fixed 定位 ,使得 firefox,chrome下的过滤查询区域始终位于顶部。

3.利用 top:-xxpx,隐掉复杂的过滤区域,只剩下底部的便捷工具条

4.利用webkit以及gecko的私有属性实现工具条悬浮的边框阴影功能。



对于ie6由于不支持fixed定位,淘宝没有实现这个功能,但是有 absolute+scroll 也是可以模拟的,但是就没fixed那么平滑的定位到视窗顶部了,对于高级浏览器用户算是一个惊喜吧 :),我觉得应该想一个方法使得ie6用户得知这个功能,也算促进用户升级,为国内web开发者做贡献。