无缓冲的随屏滚动效果(兼容IE6)-fixedPosition

在web页面制作开发中，有时需要将元素固定在某个位置，不随浏览器的拖动而改变, 这时候，你可能很快会想到使用position:fixed;方式去处理，虽然这个方案是标准的，并且在ie6+,ff等浏览器中都能很好的渲染，但ie6却不支持此属性。

早些时候在网上已经涌现了一些解决方案，如下:
1.监听滚动条的拖动，动态改变元素的位置。
2.利用ie所支持css中的expression，在里面写script去动态获取位置。
但是上面的两种方法都会造成元素的刷新，虽然第二种会好些，但仍然不是我们要的效果，在这里以上两种实现方法，不做细节讨论，主要给大家介绍一种方法：
1.如果是非ie6,那么利用position:fixed;方式。
2.如果是ie，通过将body元素高定位100%,并做一些处理。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title> fixed position </title>
<style type="text/css">
body {
	font-size:12px;
	margin:0;
}
#posBlock {
	margin:0;
	border:4px solid #D2E2F4;
	width:480px;
	line-height:22px;
	background:#F0F5FB;
	color:#555555;
	font-size:12px;
}

#content {
	width:500px;
	height:1200px;
	line-height:22px;
	padding:5px;
}

#testBlock {
	border:1px solid #D2E2F4;
	background:#F0F5FB;

width:300px;
	padding:5px;
}
</style>
<script type="text/javascript">

/*添加css规则*/
fixedPosition.addCSSRule = function(key ,value){
   var css = document.styleSheets[document.styleSheets.length-1];
	css.cssRules ? 
		 (css.insertRule(key +"{"+ value +"}", css.cssRules.length)) :
		 (css.addRule(key ,value));

};

/*标志特定公共规则是否存在*/
fixedPosition.inited = false;

/*设置特定公共规则*/
fixedPosition.setGlobal = function(){
	if (! fixedPosition.inited)
	{
		document.body.style.height = "100%";
		document.body.style.overflow = "auto";
		fixedPosition.addCSSRule("*html" ,"overflow-x:auto;overflow-y:hidden;");
		fixedPosition.inited = true;
	}
};
</script>
<script type="text/javascript">
//<![CDATA[
	var $ = function(id){
		return document.getElementById(id);
	};

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

春去花还在-CoLee★＂

无缓冲的随屏滚动效果(兼容IE6)-fixedPosition

Leave a Reply

Search

Categories

Monthly Archives

Links

合作链接

Tags

Meta