浮层跟随滚动条移动的实现办法

用过淘宝的网页聊天工具就知道,当你拖动滚动条或者移动鼠标滑轮的时候,聊天窗口可以跟随页面一起移动。暂且不去追究淘宝是怎么实现的,现在我要列出两种解决办法

首先介绍第一种:

要设置html{width:100%;height:100%;overflow:auto;}body{width:100%;height:100%;overflow:auto;}这样做的就是让body的滚动条覆盖掉html的滚动条,html的滚动条覆盖掉浏览器控件的滚动条,当页面滚动时,body和html实际上是同时都在滚动,因此就实现了跟随的效果。而浮层窗口就必须是以body为参照的绝对定位。假如浮层为一div,则可这样设置div{position:absolute;width:200px;height:200px;left:50%;top:50%;}

第二种解决办法:css结合JavaScript

这种方法是要区分浏览器的,因为ie6对一些属性并不支持,所以在这里需要用到一些css-hack技术。具体思路是这样的,在页面尾部添加一个div作为容器,用来存放浮层。给div容器设置.container{position:fixed; width:100%; height:20px; *position:relative;}这样在解析的时候,ie8,火狐等标准浏览器会正常解析到position:fixed;但是ie6由于不支持fixed所以position就会被后面的*position:relative;所覆盖,在ie6中就显示为relative的属性。同事onscrooll时,需要针对ie6做跟随的定位操作$("Container").css({position:"absolute",left:0,top:bHeight+document.documentElement.scrollTop});

这样就做到了跟随滚动的效果,在ie中移动滚动条会出现抖动现象,在其他浏览器由于是fixed,所以会很流畅。为了削弱ie6中抖动的效果,在样式表里可以添加上这样一条内容*html,*html body{background-image:url(about:blank);background-attachment:fixed;}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值