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開發者的上網首頁