用JS模拟一个fixed的效果，但是ie和chrome下闪厉害，求解决办法

注意：这个效不是相对于浏览器定位的，box元素始终相对父级定位，当拖动滚动条的时候，固定在一个位置不动。请教大家一些，有什么方法可以解决闪动的问题~~就让他相对父级死死的定位在一个地方就就行了~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ background:#CCC;}
.wrapper{ position:relative; width:500px; height:500px; background:#FFF;}
.box{ position:absolute; top:10px; right:20px; width:150px; height:100px; background:green;}
</style><script type="text/javascript">window.onload=function(){

var box=document.getElementById('box');

window.onscroll=function(){

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
document.title=scrollTop;
box.style.top=(scrollTop+10)+'px';
}
};</script>
</head>
<body style="height:3000px;">
<div class="wrapper">
<div class="box" id="box"></div>
</div>
</body>
</html>

解决方案 »

  1.   

    闪是不可避免的
    .wrapper{position:fixed !important;position: relative;}
    加个这个!important
      

  2.   


    <!doctype html>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
    body,div{ margin:0; padding:0; color:#333;}
    .main{ width:960px; height:1000px; margin:0 auto; padding-top:300px; edui-filter-align-center }
    .fixbar{position:fixed; width:100%; height:23px;padding-top:8px;bottom:0;left:0;border-top:4px solid #09C; overflow:hidden;}
    .fixbar-wrap{width:960px;margin:0 auto}
    * html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
    *html .fixbar{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
    *html .fixbar{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));} 
    </style>
    </head>
    <body>
    <div class="main">这是主体内容</div>
    <div class="fixbar">
    <div class="fixbar-wrap">这是底部的内容</div>
    </div> 
    </body>
    </html>
    楼主 参考下。