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

fedawn 2012-03-29 03:56:24

注意：这个效不是相对于浏览器定位的，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>

...全文

204 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

001007009 2012-03-29

打赏
举报



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