解决 IE6 position:fixed 固定定位问题
26就像你所遇到的问题一样， IE6 有太多的 bug 让制作网页的人头疼。这篇文章介绍的是介绍我的如何解决 IE6 不支持 position:fixed; 属性的办法。
关于 position:fixed; 属性
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
position:fixed; 可以让网页上的某个元素固定在一个绝对的位置，即使拉动滚动条位置也不发生变化。（在 LOO2K 博客右下角的那个置顶的小按钮就是用了这个 CSS 属性实现的）
一般的 position:fixed; 实现方法
以我的博客为例，在右下角<div id="top">...</div>这个 HTML 元素使用的 CSS 代码如下：
#top{
position:fixed;
bottom:0;
right:20px;
}
实现让<div id="top">...</div>元素固定在浏览器的底部和距离右边的20个像素。
在 IE6 中实现 position:fixed; 的办法
刚刚提过，在 IE6 中是不能直接使用 position:fixed; 。你需要一些 CSS Hack 来解决它。（当然，IE6 的问题也不仅仅 position:fixed;）
相同的还是让 <div id="top">...</div> 元素固定在浏览器的底部和距离右边的20个像素，这次的代码是：
#top{
position:fixed;
_position:absolute;
bottom:0;
right:20px;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
right 跟 left 属性可以用绝对定位的办法解决，而 top 跟 bottom 就需要用上面的表达式来实现。其中在_position:absolute;中的_符号只有 IE6 才能识别，目的是为了区分其他浏览器。
上面的只是一个例子，下面的才是最重要的代码片段：
使元素固定在浏览器的顶部
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}
使元素固定在浏览器的底部
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
这两段代码只能实现在最底部跟最顶部，你可以使用 _margin-top:10px; 或者 _margin-bottom:10px; 修改其中的数值控制元素的位置。
position:fixed; 闪动问题
现在，问题还没有完全解决。在用了上面的办法后，你会发现：被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入：
*html{
background-image:url(about:blank);
background-attachment:fixed;
}
其中 * 是给 IE6 识别的。
到此，IE6 的 position:fixed; 问题已经被解决了。现在 LOO2K 这个博客上的固定定位就是使用的这个办法解决 IE6 固定定位问题的。
=.= 额 ， IE6 可以被淘汰了 、、、
这Hack好~~IE6…太不和谐了~~- -！
@MOPVHS
能解决在 IE6 里面的 bug 是事实。但是上次在 Yahoo 的 developer 上看到他们的建议：最好不要使用 CSS 表达式，这对网站的性能并不是很好。
正在准备换一个办法解决它。 :)
IE6的悲剧地方，我只好尽量避免了
NND ie6 搞了半天~
这个办法好啊 一直以为ie6只能用js做fixed的效果了
小兄弟你很棒啊~~
@Destiny
其实不止啦，这个方法对一些像我这样的小博客来说还行，但是对一些大网站就有点吃不消了。 :smile:
@loo2k
应该比用js强多了吧,还有那个闪动问题我都没想着要去考虑它,挺好的.你的意思难道还有别的CSS方法么?我是专门搞前端的，现在有点汗颜啦，呵呵 :oops:
用了你这方法，终于解决了我半天来的查找跟调试。。怎么说也顶一下支持支持。
你的 JS 是用什么压缩的？
@Kars
一直在用 YUICompress,之前有时候是用 Packer.
@loo2k
压缩算法 真先进、、居然都用 单字母 来设定 变量名、、OTZ
终于找到方法，超级谢谢楼主。IE6存在一天我就不爽一天.
我有一个position fixed的纯css解决方案，不过应用它的网页还是半成品，很想和你交个朋友，可惜还没有时间经营自己的博客，没地方招待…
Pingback: 解决 IE6 position:fixed 固定定位问题 _ 专注WordPress主题定制设计_WordPresscms主题设计！
Pingback: 完美的 jQuery进度条 _ 专注WordPress主题定制设计_WordPresscms主题设计！
这个方法很有效 多谢LZ
方法很不错，需要定住的都定住了。但是问题来了，它会没完没了的往下滚动，不会判断是否到底端了。。
楼主才是原创的，网上很多资源都不行 而且都一样的code，感谢楼主 ：）拥抱一下
用CSS表达式恐怕要拖慢效率。使用css hack是否还会影响没测试过。
用CSS表达式…这不是可取的方法哦…这CSS表达式也还可以优化，参考
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
而且…为什么不直接
_top:expression(function() {(document.documentElement.scrollTop;});
呢？？eval的效率还没这个来得高哦…蝴蝶书(中文版p110-p111)有说
而且…如果仅仅是对top和bottom的hack的话…根本就不需要用到CSS表达式…直接2个DIV就搞定了，参考
http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/
上面这方法的话，在一种情况下会出现“BUG”，就是要FIXED的DIV，如果是
right:0px;
的话，当显示内容的DIV出现Y轴滚动条的话…..那就….只能用CSS表达式了…
BTW….刚本来打了一大段，就差几个字了…结果CHROME既然给我崩溃…麻痹，不就开了近20个标签嘛
…….刚测试的时候发现….如果用了
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
这CSS表达式优化方法的话，那
*html div.fixed {
position:absolute;
top:expression(function(e) {
e.style.zoom = “1″;
e.style.top = Math.max(document.documentElement.scrollTop, document.body.scrollTop)+”px”;
}(this));
}
就只会执行一次表达式…这样原本想要的效果就没了…木办法…只好舍弃CSS表达式优化…
*html div.fixed {
position:absolute;
top:expression(Math.max(document.documentElement.scrollTop, document.body.scrollTop)+”px”);
}
为了对淘汰IE6尽点贡献…我决定就用这表达式来折磨IE6用户了…XD
lz 为什么不在自己右侧的那个 滚动到顶部 弄成兼容 ie6的 …
@MOPVHS:
居然在这里发现你了
@Fakefish:
哈哈，10年我就踏足此地了！
大爱，很棒，完美解决