首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2012-04-10 
用JS模拟一个fixed的效果,但是ie和chrome下闪厉害,求解决办法注意:这个效不是相对于浏览器定位的,box元素

用JS模拟一个fixed的效果,但是ie和chrome下闪厉害,求解决办法
注意:这个效不是相对于浏览器定位的,box元素始终相对父级定位,当拖动滚动条的时候,固定在一个位置不动。

请教大家一些,有什么方法可以解决闪动的问题~~就让他相对父级死死的定位在一个地方就就行了~~


HTML code
<!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>


[解决办法]
闪是不可避免的
.wrapper{position:fixed !important;position: relative;}
加个这个!important

热点排行