此方法针对IE6使用css表达式实现,会影响IE6的性能,慎用。
class="fixed fixed-top fixed-right"
.
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; }
.fixed-top
, 那么就别给这个元素加 top 属性的值.fixed-top
的子元素内设置