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;
給浮動元素加一個屬性標(biāo)識，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;
給浮動元素加一個屬性標(biāo)識，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)文章
這篇文章主要介紹了微信小程序 接入騰訊地圖的兩種寫法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了JavaScript中字符串的常用操作方法及js特殊字符,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了velocity.js實現(xiàn)頁面滾動切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
使用uni-app框架開發(fā)微信小程序,可以使用高德地圖開發(fā)地圖選點、搜索位置、定位、獲取詳細(xì)的地址信息、碼值等信息,下面這篇文章主要給大家介紹了關(guān)于uniapp使用高德地圖的超詳細(xì)步驟,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了用js實現(xiàn)用戶注冊的簡潔版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Javascript實現(xiàn)帶關(guān)閉按鈕的網(wǎng)頁漂浮廣告代碼
帶有關(guān)閉功能的漂浮圖片的實現(xiàn)方法有很多，下面為大家介紹下使用Javascript是如何實現(xiàn)的，喜歡的額朋友可以了解下2014-01-01
本篇文章主要介紹了webpack處理 css\less\sass 樣式的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要給大家介紹了關(guān)于js控制滾動條滾動的兩種簡單方法,通過JavaScript可以直接控制滾動條的位置,從而達到鎖定滾動條的效果,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
ES6新增數(shù)據(jù)結(jié)構(gòu)WeakSet的用法詳解
WeakSet和Set類似，同樣是元素不重復(fù)的集合，它們的區(qū)別是WeakSet內(nèi)的元素必須是對象，不能是其它類型。接下來通過本文給大家詳細(xì)介紹ES6新增數(shù)據(jù)結(jié)構(gòu)WeakSet的用法，感興趣的朋友一起看看吧2017-08-08
獲取任意Html元素與body之間的偏移距離 offsetTop、offsetLeft （For:IE5＋ FF1 ）[
獲取任意Html元素與body之間的偏移距離 offsetTop、offsetLeft （For:IE5＋ FF1 ）[...2006-12-12