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