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

View Code

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