CSS固定DIV，导航条顶部固定fixed（兼容IE6）

CSS固定DIV，导航条顶部固定fixed（兼容IE6）

以下图：

固定以前：

页面往下滚动以后：

Demo免费下载：http://down.51cto.com/data/1327117

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。

可是在IE6下，并不支持position:fixed属性，这个时候咱们须要对IE6进行hack处理。解决的方案是使用postion:absolute属性，它的做用你们都很熟悉，相对于父元素进行绝对定位，而后咱们能够经过expression来改变#ads的top值。

什么是expression？

expression的定义：IE5及其之后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性能够是元素固有的属性，也能够是自定义属性。就是说CSS属性后面能够是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。在表达式中能够直接引用元素自身的属性和方法，也能够使用其余浏览器对象。这个表达式就好像是在这个元素的一个成员函数中同样。

重要代码以下：（注意css中对IE6兼容的处理）

/* 实例CSS */
html{ _background:url(about:blank);} /*阻止闪动 in IE6 , 把空文件换成about:blank , 减小请求*/
body{ font-size:12px; font-family:Arial,Tahoma,sans-serif; color:#EEEEEE; text-align:center; background:#E2E2E2;}
#header{
	width:100%;
	height:80px;
	line-height:80px; 
	background:#333
}
#topToolbar{
	_display:none;
	width:100%;
	height:40px;
	line-height:40px;
	background:#333;
	position:fixed;
	top:-40px;
	left:0;
	_top:0;
	_position:absolute;
	_top:expression(documentElement.scrollTop);
}
#content{
	border:1px solid #f00;
	width:880px;
	height:1390px;
	margin:auto
}
#bottomToolbar{
	width:100%;
	height:40px;
	line-height:40px;
	background:#333;
	position:fixed;
	bottom:0;
	left:0;
	_position:absolute;
	_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);
	/*
		document.body.scrollTop 网页滚动的距离
		document.body.clientHeight 网页可见区域高
		this.offsetHeight 当前元素的高度
	*/
}

版权全部：

PHPerxuqin-PHP开发者的上网首页