超出屏幕时把固定层变为定位层

相信很多人都上过taobao吧，在taobao的产品列表页有一个浮动的用来排序的浮动层，当你拖动滚动条而导致那个排序栏看不到的时候它会自动变为浮动层，一直固定在那里。非常好的一个用户体验实例。如果不明白的话就看下面的图片吧

淘宝产品列表：http://search1.taobao.com/browse/50010388/n-g,wds5bla----------------40--commend-0-all-50010388.htm?ssid=s0&TBG=7627.module-1.48&at_topsearch=1

 

腾讯财经产业经济：http://finance.qq.com/industry/index.htm

 

如何实现？
scrollTop是什么？当元素内部的内容高度超过元素本身的高度时就会出现滚动条，随着拖动滚动条而被隐去的上面部分的高度就是scrollTop值。
这种定位层就是当页面触发onscroll事件时，取得scrollTop值并写入定位层CSS属性，使之保持位置。

 

查看演示

 

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: