【一天一道兼容性】之——IE6下fixed失效

问题：

 

demo：

 <style>
        html, body {margin: 0;padding: 0;}
        body {background-color: #aaa;height: 2000px;}
        #alertFram {background-color: #a00;width: 50px;height: 50px;position: fixed;left: 50%;top: 20%;}//IE6下fixed失效
 </style>
 <div id="alertFram"></div>

解析问题：

IE直到IE7才支持fixed，所以只需要针对IE6进行兼容处理

采取window.onscroll模拟，但是单纯的绝对定位+计算位置会出现恶心的抖动，所以要用body背景固定的方法。

解决问题：

<script>
        (function (win, doc) {
            var isIE6 = !!doc.all && doc.documentMode == undefined,
                div = doc.getElementById("alertFram"),
                html = doc.getElementsByTagName('html')[0],
                divTop = 0;
            if (isIE6 && doc.body.currentStyle.backgroundAttachment !== 'fixed') {
                html.style.backgroundImage = 'url(about:blank)';
                html.style.backgroundAttachment = 'fixed';
                div.style.position = "absolute";
                divTop = parseFloat(div.currentStyle.top) || 100;
                window.onscroll = fixedHandle;
            };
            function fixedHandle() {
                div.style.top = doc.documentElement.scrollTop + divTop + 'px';
            }
        })(window, document)
</script>