js，css三種方法解決IE6下position:fixed的Bug以及閃動問題

IE6下position:fixed的Bug應該是個老問題。不過，今天在搞瀑布流插件寫返回頂部按鈕時(老是閃動)卻花了我不少時間，之前也寫過一篇文章解決過，但是是用到css表達式解決，而現在的需求是要在js中動態定位，所以之前的辦法不是很合適。今天再來總結一下：

方法一：純css

*html{height:100%;overflow:hidden;}
*html body{height:100%;overflow:auto;}

原理：你拖動的滾動條並不是拖動的整個頁面，而僅是body的滾動條

優點：視覺效果完美，代碼量少，不耗性能

缺點：不會觸發onscroll事件(因為html沒有滾動)，可能會影響一些js組件; fixed定位層必須是基於body層定位的。

方法二：css + expression

完美解決IE6下position:fixed的Bug;以及閃動問題

原理：ie6使用絕對定位，利用css表達式計算相應的值

優點：視覺效果完美，兼容性強

缺點：相對比較耗性能，不夠靈活，而且你可能會遇到這樣的Bug(點擊查看)

方法三：js

// usage:
// fixedPosition(elem, {top:0, left:0});
// fixedPosition(elem, {bottom:0, right:0});
var fixedPosition = function(){
    var html = document.getElementsByTagName('html')[0],
        dd = document.documentElement,
        db = document.body,
        doc = dd || db;
    
    // 給IE6 fixed 提供一個"不抖動的環境"
    // 只需要 html 與 body 標簽其一使用背景靜止定位即可讓IE6下滾動條拖動元素也不會抖動
    // 注意：IE6如果 body 已經設置了背景圖像靜止定位后還給 html 標簽設置會讓 body 設置的背景靜止(fixed)失效
    if (isIE6 && db.currentStyle.backgroundAttachment !== 'fixed') {
        html.style.backgroundImage = 'url(about:blank)';
        html.style.backgroundAttachment = 'fixed';
    };
    
    // pos = {top:0, right:0, bottom:0, left:0}
    return isIE6 ? 
        function(elem, pos){
            var style = elem.style,
                dom = '(document.documentElement || document.body)'; 
            
            if(typeof pos.left !== 'number'){
                pos.left = doc.clientWidth - pos.right - elem.offsetWidth; 
            }
            if(typeof pos.top !== 'number'){
                pos.top = doc.clientHeight - pos.bottom - elem.offsetHeight; 
            }
            
            elem.style.position = 'absolute';
            style.removeExpression('left');
            style.removeExpression('top');
            style.setExpression('left', 'eval(' + dom + '.scrollLeft + ' + pos.left + ') + "px"');
            style.setExpression('top', 'eval(' + dom + '.scrollTop + ' + pos.top + ') + "px"');
        } : 
        function(elem, pos){
            var style = elem.style;
                
            style.position = 'fixed';
            
            if(typeof pos.left === 'number'){
                style.left = pos.left + 'px';
            }else{
                style.left = 'auto'; 
                style.right = pos.right + 'px';
            }
            
            if(typeof pos.top === 'number'){
                style.top = pos.top + 'px';
            }else{
                style.top = 'auto'; 
                style.bottom = pos.bottom + 'px';
            }
         
        };
}();

原理：原理同上，動態設置expression，如果直接在onscroll事件里設置定位層的top,left,bottom,right，定位層會出現閃動；

優點：動態控制定位層的位置

缺點：還是使用了css表達式

方法四：舍棄IE6

原理：Bug之來源，應該淘汰

優點：徹底根除Bug

缺點：暫無

擴展：離奇解決

http://bbs.blueidea.com/thread-2938030-1-1.html

原理：沒搞懂，推測跟瀏覽器的重繪[repaints]與重排[reflows]有關

 

如果讀者還有其他更好的方法，希望能夠分享一下，歡迎加入web前端交流群（75701468） 分享您我的經驗.