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使用绝对定位，利用css表达式计算相应的值

优点：视觉效果完美，兼容性强

缺点：相对比较耗性能，不够灵活，而且你可能会遇到这样的

方法三：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

缺点：暂无

扩展：离奇解决

原理：没搞懂，推测跟浏览器的重绘[repaints]与重排[reflows]有关

 

如果读者还有其他更好的方法，希望能够分享一下，欢迎加入web前端交流群（75701468） 分享您我的经验.