当前位置:首页 > DIV+CSS实例 > 正文

定位层始终保持在当前可见屏

作者:花匠 来源:xij.cn 【 】 浏览: 添加日期:2009-12-28 我要评论(15)     

看到过很多这样的广告,页面两边各放一个方块图片广告,拖动滚动条时广告随之动滚,始终停留在当前屏幕的下方或上方。
对于这种漂浮广告,我相信很多用户都非常不爽!
看下面两个图的应用。
当同一种技术实现的效果被应用在了不同的地方,就产生了明显的体验差别。
它们的不同点在于是否应用户需求而设计。

淘宝产品列表(已改版,没了)
淘宝产品列表

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

如何实现?
scrollTop是什么?当元素内部的内容高度超过元素本身的高度时就会出现滚动条,随着拖动滚动条而被隐去的上面部分的高度就是scrollTop值。
这种定位层就是当页面触发onscroll事件时,取得scrollTop值并写入定位层CSS属性,使之保持位置。
另外,IE6不支持position:fixed,只能用position:absolute特殊处理,当然你也可以忽略IE6
听不懂?看演示吧


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS实例〗Tags: 顶端div 层位于顶部 定位层

更多评论(15)..会员评论

257483(27.47.*.*) 发表于:2013-07-09 15:12:27
网站非常亲民,谢谢奉献! 求解: 这个置顶定位层在我鼠标滑轮滑动一圈的位置(滑动一次为3行的高度)不可见是什问题? 在网站中(如:qq空间)头部导航置顶且导航宽度百分百到边是怎么实现的?需要设置body的padding为0吗?这样的导航在什么位置插入?
weiweitangshan(119.182.*.*) 发表于:2011-08-20 10:04:29
亲手新发现这个网站,这网站办的太好了,正在努力学习中,谢谢管理员的辛勤付出。
menglude825yi(61.190.*.*) 发表于:2011-08-02 11:01:25
css+div有哪些技巧性的东西?
alioncc(61.28.*.*) 发表于:2011-07-27 13:06:37
内核不同,360、155、搜狗等等国产浏览器都是用ie内核的,火狐不是。能兼容多浏览器就不错了...
liwei769312(222.85.*.*) 发表于:2011-07-25 22:45:32
老师你好,新手提问,为什么我做的网页用火狐和360页面显示不一样呢?同样的代码,不同的浏览器,还有,我插入的js代码,有些在火狐里面显示不出来,在360里面可以...
管理员回复:说明不兼容
lm2011(113.70.*.*) 发表于:2011-07-25 08:34:48
什么是定位?有什么用?
管理员回复:这个不知道的话要去查字典了
a273893359(121.37.*.*) 发表于:2011-07-22 17:12:07
.service{ overflow:auto; background:url(../image/service_bg.jpg) repeat-y;}加这个代码的为什么在ie6中无效。。我想让他自适应背景。。怎么解决
管理员回复:自适应背景?什么意思?
together(59.172.*.*) 发表于:2011-07-20 16:03:56
在360浏览器下也不好用么。
管理员回复:360用的IE内核

出差旅游免费预订酒店

【视频教程】新手常见问题