用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