html元素固定定位fixed

元素固定定位，比如：固定在右上角或者是在左下角，主流浏览器下，使用fixed就能实现，但是IE6不支持fixed，于是只能采取其他方法。

目前有两种方式可以实现：

1、 用JS实现：

右侧距顶部45px固定

#box-rb{position: fixed; z-index:999;top:45px;right:0;_position:absolute;*zoom:1;}

JS代码：

if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {

var $ltWrap = $("#box-rb");

var scrollTop = $(window).scrollTop();//滚动条顶部偏移

var wrapT = scrollTop + 45;

$ltWrap.css({ top: wrapT + "px"});

$(window).scroll(function () {

var wrapScrollT = wrapT + ($(window).scrollTop() - scrollTop);

$ltWrap.css({ top: wrapScrollT + "px" });

});

 

右侧距底部30px固定

#box-lb{position: fixed; z-index: 999; bottom: 30px; right: 0;_position:absolute; *zoom:1;}

 

JS代码：

if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {

var $rbWrap = $("#box-lb");

var winH = $(window).height();//窗口高

var wrapH = $rbWrap.height();

var scrollTop1 = $(window).scrollTop();//滚动条顶部偏移

var currH = winH - (30 + wrapH);

$rbWrap.css({ top: currH + "px"});

$(window).scroll(function () {

var wrapScrollT1 = currH + ($(window).scrollTop() - scrollTop1);

$rbWrap.css({ top: wrapScrollT1 + "px" });

});

}

可能用js实现的方式是比较常见的吧，下面说说第二种实现方式：用css实现。

2、用CSS实现：

右侧距顶部45px固定

#box-rb{position: fixed; z-index: 999;top: 45px; right: 0; _position:absolute;_top:expression(documentElement.scrollTop + 45);overflow:hidden;*zoom:1;}

 

右侧距底部30px固定

#box-lb{position: fixed; z-index: 999; bottom: 30px; right: 0;_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight + 30);overflow:hidden;*zoom:1;}

 

 

 

扩展点：

zoom:1;属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等

 

总结:

以上方式都可以实现，但是我还不是很明确那种方法相对会更优。CSS的expression对前端来说，好像不是推荐使用的，但是它实现起来减少了代码量。后面我会继续深入，看看最优的解决方案，当然，如果有人已经有明确的方案，还望分享^_^