跨浏览器 position:fixed

此方法针对IE6使用css表达式实现,会影响IE6的性能,慎用。

The block is fixed at the right-top side by apply an attribute class="fixed fixed-top fixed-right".
The block is fixed at the right-bottom side by apply an attribute class="fixed fixed-left fixed-bottom".

实现fixed的Demo不在此区域内了,请看 右上角、左下角

.fixed-top 相当于正常的 position:fixed; top:0;
.fixed-bottom 相当于正常的 position:fixed;bottom:0px;
.fixed-left 相当于正常的 position:fixed;left:0px;
.fixed-right 相当于正常的 position:fixed;right:0;

详细:
.fixed{
    position:fixed;
}

/* 相当于正常的 position:fixed; top:0;  */
.fixed-top {
    bottom:auto;
    top:0;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop));
}

/* 相当于正常的 position:fixed;bottom:0px; */
.fixed-bottom {
    bottom:0;
    top:auto;
    _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)));
}

/* 相当于正常的 position:fixed;left:0px; */
.fixed-left {
    left:0;
    _position:absolute;
    right:auto;
    _left:expression(eval(document.documentElement.scrollLeft));
}

/* 相当于正常的 position:fixed;right:0; */
.fixed-right {
    right:0;
    left:auto;
    _right:auto;
    _left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));
}

/* 当不是 https 时,可以把 # 换成 about:blank 以提升效率 */
html,html body {
    _background-image:url('about:blank');
    _background-attachment:fixed;
}

/* hack for ie6 */
.fixed-top,.fixed-right,.fixed-bottom,.fixed-left {
    _position:absolute;
}

问题及注意事项: