javascript ie6相容position:fixed實作思路_javascript技巧

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 //判斷是否ie6瀏覽器if( $.browser.msie || parseInt($.browser.version,10) 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"; }); }); } }