轉文請標明 --- 出處：穆乙
固定頭部或者左側導航現在**中隨處可見，主要是為了提高使用者體驗；以及右下角的固定廣告，頁面兩側的固定廣告。
這些實現起來其實並不困難，都基於乙個屬性：position:fixed;是可惜ie6不支援；只能退而求其次利用其它辦法，比如利用js監聽window的resize和scroll事件，重置位置。
實現起來也很簡單，主要是scrollleft或者scrolltop以及可視視窗高度來定位。但這些都有乙個問題好就是會出現「震動」。
所以，又出現另外一種解法，就是利用internet explorer的css表示式(expression),這同樣有問題就是效能問題。眾所周知，expression的效能是被人們所詬病的。
但為了達到目的不妨用一用。但可惜的是同樣會出現震動，但這個震動是可以解決的。
解決此問題的技巧就是使用background-attachment:fixed為body或html元素新增乙個background-image。這就會強制頁面在重畫之前先處理css。
因為是在重畫之前處理css，它也就會同樣在重畫之前首先處理你的css表示式。這將讓你實現完美的平滑的固定位置元素！
具體的資訊可以看這裡：
我這裡只是根據這個原理，把整個應用封裝成了乙個函式：
下面是乙個應用demo:
轉文請標明 --- 出處：穆乙doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>固定層
title
>
<
style
type
="text/css"
>
body
.lefttop
.leftbtm
.righttop
.rightbtm
style
>
head
>
<
body
>
<
divclass
="lefttop"
id="block1"
>
div>
<
divclass
="leftbtm"
id="block2"
>
div>
<
divclass
="righttop"
id="block3"
>
div>
<
divclass
="rightbtm"
id="block4"
>
div>
<
script
>
function
fixed(fid, pos) ;if(
!ie6)
else
)();
varleft
=pos[
'left']
?"left:expression(eval(document.documentelement.scrollleft+"+
parseint(pos[
'left']
||0)+
"))":
"left:auto",
right
=pos[
'right']
?"left:expression(eval(document.documentelement.scrollleft + document.documentelement.clientwidth - this.offsetwidth -"+
parseint(pos[
'right']
||0)+
"))":
"right:auto",
top=
pos[
'top']
?"top:expression(eval(document.documentelement.scrolltop+"+
parseint(pos[
'top']
||0)+
"))":
"top:auto",
bottom
=pos[
'bottom']
?"top:expression(eval(document.documentelement.scrolltop + document.documentelement.clientheight - this.offsetheight -"+
parseint(pos[
'bottom']
||0)+
"))":
"bottom:auto";
mystyle.stylesheet.addrule("#
"+id, left+"
;"+right+"
;"+top+"
;"+bottom+"
;",0
);document.getelementsbytagname(
"head")[
0"block1
", );
fixed(
"block2
", );
fixed(
"block3
", );
fixed(
"block4
", );
script
>
body
>
html
>
執行效果圖如下：
這裡截圖用的firefox,經驗證 ie6通過，其它瀏覽器利用的是position:fixed無需驗證！
expression解決IE6下固定定位的相容
本文所使用的技巧是用了一條 internet explorer 的 css 表示式 expression 你不可以直接使用該表示式，因為它可能會因為快取而不更新。解決這一點的最簡單的方式是使用 eval 包裹你的語句。如何解決 振動 的問題？顯然 ie 有乙個多步的渲染程序。當你滾動或調整你的瀏覽器...
expression解決IE6下固定定位的相容
本文所使用的技巧是用了一條 internet explorer 的 css 表示式 expression 你不可以直接使用該表示式，因為它可能會因為快取而不更新。解決這一點的最簡單的方式是使用 eval 包裹你的語句。如何解決 振動 的問題？顯然 ie 有乙個多步的渲染程序。當你滾動或調整你的瀏覽器...
固定定位fixed失效的解決方案
固定標題欄 這是中間第一條可滾動內容 這是中間可滾動內容 這是中間可滾動內容 這是中間可滾動內容 這是中間可滾動內容 這是中間可滾動內容 這是中間可滾動內容 這是中間可滾動內容 這是中間可滾動內容 這是中間可滾動內容 這是中間可滾動內容 這是中間可滾動內容 這是中間可滾動內容 這是中間可滾動內容 這...