詳解IE6中的position：fixed問(wèn)題與隨滾動(dòng)條滾動(dòng)的效果
前言：
在《【jQuery】兼容IE6的滾動(dòng)監(jiān)聽(tīng)》（點(diǎn)擊打開(kāi)鏈接）提及到解決IE6fixed問(wèn)題，具體是要引入一個(gè)js文件，還要聲明一條腳本就為這個(gè)div聲明fixed定位去解決，起始這樣很不好啊。引入的Javascript不好管理之余，還要在head聲明引入javascript，之后又要給這個(gè)div聲明一個(gè)id，之后又要在腳本出弄一條聲明，實(shí)在是煩死了。
使用position：fixed無(wú)非是想做出如下的效果。
基本上position：fixed是在IE7以上的所有瀏覽器都是沒(méi)有問(wèn)題的：
IE8：
野狐禪FireFox：
然而由于IE6中直接就沒(méi)有position：fixed屬性，要做出如下的效果：
只能利用position: absolute;加一段在css樣式中執(zhí)行的javascript腳本去解決。
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8">
title>Untitled Document/title>
style type="text/css">
.fixedbox {
background: #69C;
height: 60px;
width: 100px;
position: fixed;
bottom: 100px;
/*IE6實(shí)現(xiàn)position: fixed;*/
/*等價(jià)于position: fixed;雖然代碼好長(zhǎng)，但是根本就不用管*/
_position: absolute;
_top: expression(eval(
document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight-
(parseInt(this.currentStyle.marginTop,10)||0)-
(parseInt(this.currentStyle.marginBottom,10)||0)));
/*等價(jià)于position: fixed;雖然代碼好長(zhǎng)，但是根本就不用管*/
_margin-bottom:100px;/*設(shè)置位置，不要用bottom，而是改用margin-bottom，margin-xx來(lái)實(shí)現(xiàn)*/
}
/style>
/head>
body>
div style="float:left;width:80%;min-height:100px;">
p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>
p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>
p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>
p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>p>sss/p>
/div>
div style="float:left;width:20%;min-height:100px;">div class="fixedbox">/div>/div>
div style="clear:both">/div>
/body>
/html>
上述代碼，對(duì)于IE6的樣式，前面都加上了_，_的部分是IE6特定的重寫(xiě)樣式聲明，具體見(jiàn)《【CSS】關(guān)于CSS樣式中的!important、*、_符號(hào)》（點(diǎn)擊打開(kāi)鏈接）
而實(shí)際上，在IE6中，以下的CSS：
.fixed{
position: absolute;
top: expression(eval(
document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight-
(parseInt(this.currentStyle.marginTop,10)||0)-
(parseInt(this.currentStyle.marginBottom,10)||0)));
}
等價(jià)于其它瀏覽器的：
.fixed{
position: fixed;
}
當(dāng)然IE6中實(shí)現(xiàn)position：fixed的CSS可能在某些瀏覽器中不正常，因此在各個(gè)樣式前面補(bǔ)上一條下劃線_，表示僅在IE6中執(zhí)行。
同時(shí)IE6應(yīng)有的如上樣式之后，不要像其它瀏覽器用right,top,left,bottom去定位，而是用margin-bottom,margin-left,margin-right去設(shè)置被position：fixed的div的位置，
這里調(diào)節(jié)div的位置的時(shí)候還需要注意，由于上述的兼容IE6的CSS利用到top的屬性，所以設(shè)置margin-top是不管用，如果你要設(shè)置這個(gè)div在浮動(dòng)的時(shí)候，離瀏覽器的頂部是多少的話，你應(yīng)該這樣寫(xiě)：
.fixed{
/*IE6實(shí)現(xiàn)position: fixed;*/
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop));
_margin-top:100px;
}
這里關(guān)于_top的代碼之所以短了這么多，是因?yàn)闊o(wú)須用document.documentElement.clientHeight來(lái)獲取瀏覽器顯示窗口大小。
而-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)一切是為了微調(diào)更加精確，如果你不想要也可以不加，僅僅是有一點(diǎn)視覺(jué)效果而已。
再者，上述的代碼，大家可以看到，關(guān)于fixedbox這個(gè)東西，我并沒(méi)有設(shè)置其right,left，是因?yàn)椋蚁胱屍湓陔S滾動(dòng)條滾動(dòng)的時(shí)候，依舊能夠保持父級(jí)div的float:left屬性。
就是，右邊的藍(lán)色色塊，與左邊一大堆sss，依舊是80%與20%的分割。
如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
您可能感興趣的文章:- JS 滾動(dòng)事件window.onscroll與position：fixed寫(xiě)兼容IE6的回到頂部組件
- js完美解決IE6不支持position:fixed的bug
- ie6,ie7,ie8完美支持position:fixed的終極解決方案
- javascript ie6兼容position:fixed實(shí)現(xiàn)思路
- IE6支持position:fixed完美解決方法
