javascript ie6兼容position:fixed實現(xiàn)思路
更新時間：2013年04月01日 10:20:20 作者：
positon:fixed 讓HTML元素脫離文檔流固定在瀏覽器的某個位置，由于網(wǎng)頁中類似這樣的元素很多，所以本文的出現(xiàn)是很有必要的了，接下為大家介紹下javascript如何實現(xiàn)ie6下的position:fixed
positon:fixed 讓HTML元素脫離文檔流固定在瀏覽器的某個位置
網(wǎng)頁中經(jīng)常會有浮動的導(dǎo)航條會用到這種定位模式，但是ie6下并不兼容這種定位
浮動導(dǎo)航條的樣式，重要的是position:fixed;bottom:60px;(浮動導(dǎo)航底部距離窗口底部60px)
.floating_9677{position:fixed; z-index:961; bottom:60px;}
ie6下positon:fixed不起作用，只能靠js來實現(xiàn)了，首先在ie6下需要將position設(shè)置為absolute
position:fixed;bottom:60px;_position:abosulte;
給浮動元素加一個屬性標識，js通過這個屬性能找到這些浮動元素。tag="floatNavigator"
工作中浮動導(dǎo)航條主要通過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";
});
});
}
}
網(wǎng)頁中經(jīng)常會有浮動的導(dǎo)航條會用到這種定位模式，但是ie6下并不兼容這種定位
浮動導(dǎo)航條的樣式，重要的是position:fixed;bottom:60px;(浮動導(dǎo)航底部距離窗口底部60px)
復(fù)制代碼 代碼如下:
.floating_9677{position:fixed; z-index:961; bottom:60px;}
ie6下positon:fixed不起作用，只能靠js來實現(xiàn)了，首先在ie6下需要將position設(shè)置為absolute
復(fù)制代碼 代碼如下:
position:fixed;bottom:60px;_position:abosulte;
給浮動元素加一個屬性標識，js通過這個屬性能找到這些浮動元素。tag="floatNavigator"
工作中浮動導(dǎo)航條主要通過top或者bottom來定位。
復(fù)制代碼 代碼如下:
//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";
});
});
}
}
相關(guān)文章
Three.js物理引擎Cannon.js創(chuàng)建簡單應(yīng)用程序
這篇文章主要為大家介紹了Three.js物理引擎Cannon.js創(chuàng)建簡單應(yīng)用程序詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
今天小編就為大家分享一篇解決JavaScript layui 下拉框不顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
微信小程序?qū)崿F(xiàn)點餐小程序左側(cè)滑動菜單
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)點餐小程序左側(cè)滑動菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JavaScript中的CSS屬性及命名規(guī)范。需要的朋友可以過來參考一下，希望對大家有所幫助2013-11-11
在js的嵌套for循環(huán)異步執(zhí)行,聲明i和使用i獲取到的變量 都要用 let 聲明,不要用var,這篇文章主要介紹了JS的for循環(huán)中的var和let,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細介紹了如何通過JavaScript實現(xiàn)粒子流動效果,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴可以參考一下2023-09-09
這篇文章主要為大家詳細介紹了js校驗開始結(jié)束時間，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
基于JavaScript實現(xiàn)通用tab選項卡(通用性強)
選項卡在大量的網(wǎng)站都有應(yīng)用，雖然形式各有不同，但是索要達成的目的都是一樣的，一般都是為了進行分類或者節(jié)省網(wǎng)頁空間只用，算是一件利器，下面就是一個選項卡的代碼實例，通用性很強，下面就和大家分享一下2016-01-01
詳談ES6中的迭代器(Iterator)和生成器(Generator)
下面小編就為大家?guī)硪黄斦凟S6中的迭代器(Iterator)和生成器(Generator)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
下面小編就為大家?guī)硪黄獪\談js數(shù)組和splice的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12