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

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

首先介绍第一种：

要设置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;}