positon:fixed 讓HTML元素脫離文檔流固定在浏覽器的某個位置
網頁中經常會有浮動的導航條會用到這種定位模式,但是ie6下並不兼容這種定位
浮動導航條的樣式,重要的是position:fixed;bottom:60px;(浮動導航底部距離窗口底部60px)
復制代碼 代碼如下:
.floating_9677{position:fixed; z-index:961; bottom:60px;}
ie6下positon:fixed不起作用,只能靠js來實現了,首先在ie6下需要將position設置為absolute
復制代碼 代碼如下:
position:fixed;bottom:60px;_position:abosulte;
給浮動元素加一個屬性標識,js通過這個屬性能找到這些浮動元素。tag="floatNavigator"
工作中浮動導航條主要通過top或者bottom來定位。
復制代碼 代碼如下:
//ie6兼容position:fixed
function fixedPositionCompatibility(){
//判斷是否ie6浏覽器
if( $.browser.msie || parseInt($.browser.version,10) <= 6){
var vavigators = $("[tag='floatNavigator']");
if(!navigators.length)return;
//判斷每個浮層是靠頂部固定還是底部固定
$.each(navigators, function(){
this.top = $(this).css("top");
this.bottom = $(this).css("bottom");
this.isTop = this.top == "auto" ? false : true;
});
window.attachEvent("onscroll", function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
$.each(navigators, function(){
this.style.top = this.isTop ? scrollTop + parseInt(this.top) + "px" : scrollTop + $(window).height() - $(this).outerHeight() - parseInt(this.bottom) + "px";
});
});
}
}