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對前端來說，好像不是推薦使用的，但是它實現起來減少了代碼量。后面我會繼續深入，看看最優的解決方案，當然，如果有人已經有明確的方案，還望分享^_^