position:fixed在IE6下不起作用的修正原理以及實現(xiàn)
position:fixed能可以是元素不隨滾動條滾動而滾動,固定在視口中,在網(wǎng)頁設(shè)計中這種效果經(jīng)常用到。通常不考慮IE6的代碼是:
<body> <div id="" class="" style="position:fixed; right:20px; top:20px;border:solid 1px blue;"> fixed?? </div> <div style="height:1000px;">mock page content<div> </body>
主流的做法有兩種,一種使用expression表達(dá)式,在頁面滾動時重新設(shè)計元素的top屬性:
<body> <div id="" class="" style="position:fixed; right:20px; top:20px;border:solid 1px blue; _position:absolute;_top:expression(parseInt(document.documentElement.scrollTop,10)+20+'px');"> fixed?? </div> <div style="height:1000px;">mock page content<div> </body>
這種方法比較直接,但是每次滾動都重新計算元素的位置很消耗性能,而且頁面比較復(fù)雜的時候,會出現(xiàn)“抖動”的現(xiàn)象。
另外一種方法當(dāng)你弄明白是才發(fā)現(xiàn)奇妙無窮,是否可以改變頁面的滾動條滾動的元素呢?滾動條默認(rèn)滾動的是body元素。如果滾動的是一個div,而需要固定定位的元素并不在這個div中的話,自然就不會隨著滾動條的滾動而滾動。
<body> <style type="text/css"> html,body,#content{height:100%;overflow:auto;padding:0px;margin:0px;} #fixed{position:fixed; right:20px; bottom:20px; border:solid 1px blue;_position:absolute;} </style> <div id="content" class=""> <div id="" class="" style="background-color:#ccc;height:1000px;"> mock page content </div> </div> <div id="fixed" class=""> fixed content </div> </body>
設(shè)置一個div與body等高等寬,將頁面內(nèi)容都放到這個div中。這樣頁面滾動條其實是這個div的滾動條。然后在body下放上position:fixed的元素。這樣就大功告成了。
這基本是一個白話版的解決辦法了。基本是原理和簡單實現(xiàn),更多的細(xì)節(jié)可以參考:
http://www.qianduan.net/fix-ie6-dont-support-position-fixed-bug.html
posted on 2011-05-16 15:37 衡鋒 閱讀(2720) 評論(1) 編輯 收藏 所屬分類: Web開發(fā)