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

淘宝产品列表:http://search.taobao.com/search?cat=50010388&commend=all&q=%B0%E5%D0%AC&source=search1

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

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

下面是实例代码,请查看源文件。

在线查看

转载请注明:云南SEO优化 云南网站建设