用JS模拟一个fixed的效果，但是ie和chrome下闪厉害，求解决方法
日期：2014-05-16 浏览次数：20430 次
用JS模拟一个fixed的效果，但是ie和chrome下闪厉害，求解决办法
注意：这个效不是相对于浏览器定位的，box元素始终相对父级定位，当拖动滚动条的时候，固定在一个位置不动。
请教大家一些，有什么方法可以解决闪动的问题~~就让他相对父级死死的定位在一个地方就就行了~~
------解决方案--------------------
闪是不可避免的
.wrapper{position:fixed !important;position: relative;}
加个这个!important
注意：这个效不是相对于浏览器定位的，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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
