二分之一

在工作中，常碰到模态窗口、固定header、固定广告、固定go to top等等，都需要一个很重要的特性position:fixed，该特性在大多数浏览器下支持的还不错，只有IE6这个老大难，又调皮了。

遇到问题就解决问题，解决了问题就记录下，趁假期得空，把一些遇到的坑填平记录一下，同时分享给各位同学，好了，不多废话。

一、IE6下使用position:absolute代替position:fixed

使用绝对定位，很好理解，但是浏览器在调整时（滚动、缩放），left和top如何动态的计算其值呢？在IE6下CSS表达式(expression)可以帮我们解决难题，虽然IE8取消了该API，由于其它效率低，不建议使用。浏览器在调整时，会重新计算css expression，所以我们的问题就解决了。

CSS解决办法：

* html .header{
    position:absolute;
    left:expression(eval(document.documentElement.scrollLeft+10)+"px");
    top:expression(eval(document.documentElement.scrollTop+10)+"px");
}

JS解决办法：

expression对应在JS中的方法是style的setExpression方法，第一个参数是CSS属性名，第二个参数计算表达式字符串。

domThis.style.setExpression('left',
'eval((document.documentElement).scrollLeft + ' + 10 + ') + "px"');

二、修正IE6抖动bug

IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重画页面，这个时候它就会重新处理css表达式。

因此虽然CSS进行了重新计算，需要fixed的元素位置也进行了正确的调整，但是会有一跳一跳的抖动感觉，这种体验很不好，如果浏览器调整的频繁，很伤眼。

好在，这个问题不是无解的，是“有药可医”的。

给HTML标签，使用background-attachment这个属性，就能使IE在渲染前，先进行CSS的计算，但一定要设置background-image，如果没有图片，设置为about:blank也是可以的。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 规定要使用的背景图像。

CSS解决办法：

* html{background-image:url(about:blank);background-attachment:fixed}

JS解决办法(以jquery为例)：

if (isIe6 && html.css('backgroundAttachment') !== 'fixed') {
    html.css('backgroundAttachment','fixed')
    .css('backgroundImage','url(about:blank)');
};

三、jquery.fixed.js

(function($) {       
    jQuery.fn.Fixed = function(options) { 
        var defaults = {
            x:0, 
            y:0 
        }; 
        var o = jQuery.extend(defaults, options); 

        var isIe6 = !window.XMLHttpRequest;

        var html= $('html'); 
        if (isIe6 && html.css('backgroundAttachment') !== 'fixed') { //防止抖动
            html.css('backgroundAttachment','fixed')
            .css('backgroundImage','url(about:blank)');
        };

        return this.each(function() { 
            var domThis=$(this)[0]; 
            var objThis=$(this); 
            if(isIe6){
                objThis.css('position' , 'absolute');
                domThis.style.setExpression('left', 'eval((document.documentElement).scrollLeft + ' + o.x + ') + "px"'); 
                domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + o.y + ') + "px"');
            } else { 
                objThis.css('position' , 'fixed').css('top',o.y).css('left',o.x); 
            }
        }); 
    };       
})(jQuery)

使用方法：

$('#header').Fixed({x:0,y:0});

最后修改时间：2014年9月10日星期三晚上7点57