栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

jquery实现的超出屏幕时把固定层变为定位层的代码

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

jquery实现的超出屏幕时把固定层变为定位层的代码

非常好的一个用户体验实例。如果不明白的话就看下面的图片吧

淘宝产品列表 http://search1.taobao.com/browse/50010388/…

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

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




定位层


body{padding:10px;margin:0;}
#box{width:960px;margin:0 auto;}
#box1{width:250px;height:25px;position:relative;}
#box1_1{width:250px;height:25px;line-height:25px;background:#f00;color:#fff;}
p{font-size:24px;margin:10px 0;}





往下拖动滚动条↓jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


这里是定位层

jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网


jb51.net jb51.net jb51.net jb51.net 考高分网





转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/116645.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号