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） 分享您我的经验.