JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果(續(xù))

更新時間：2013年09月24日 16:02:46 作者：

上次導(dǎo)航欄懸停的那個頁面在IE上運(yùn)行的時候，會出導(dǎo)航欄不停的抖動問題，在本文已有完美的解決方法，將導(dǎo)航欄的定位方式由原來的absolute改為fixed即可

上次【JS-實(shí)現(xiàn)導(dǎo)航欄懸停】說到，導(dǎo)航欄懸停的那個頁面在IE上運(yùn)行的時候，會出導(dǎo)航欄不停的抖動問題。

解決方法如下：

將導(dǎo)航欄的定位方式由原來的absolute改為fixed，也不知道為什么改為fixed，就不抖了。。-_-||

復(fù)制代碼代碼如下:

 
div.navigation{ 
width: 800px; 
height: 40px; 
background: red; 
margin: 4px auto 0; 
top: 400px; 
left: 0px; 
position: fixed; 
} 

為此，JS也得做相應(yīng)的修改。

因?yàn)閒ixed定位是根據(jù)瀏覽器的可視區(qū)進(jìn)行定位的，所以原來給導(dǎo)航欄的定位都得改變。

復(fù)制代碼代碼如下:

 
//記錄導(dǎo)航條原來在頁面上的位置 
var naviga_offsetTop = 0; 
var naviga_offsetLeft = 0; 

//IE7不識別getElementsByClassName，為了兼容自定義一個 
function my_getElementsByClassName(class_name) { 
var el = []; 
//獲取所有元素 
_el = document.getElementsByTagName('*'); 
//通過className刷選 
for (var i=0; i<_el.length; i++ ) { 
if (_el[i].className == class_name ) { 
el[el.length] = _el[i]; 
} 
} 
return el; 
} 

//導(dǎo)航條，懸停在頂部 
function naviga_stay_top(){ 
var a_navigation_bar = []; 
if(document.getElementsByClassName){//Chrome, FF 
a_navigation_bar = document.getElementsByClassName("navigation"); 
} else {//IE 
a_navigation_bar = my_getElementsByClassName("navigation"); 
} 
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 

document.title = scrollTop; 
//如果向下滾動的距離大于原來導(dǎo)航欄離頂部的距離 
//直接將導(dǎo)航欄固定到可視區(qū)頂部 
if( scrollTop > naviga_offsetTop ){ 
a_navigation_bar[0].style.top = 0 + "px"; 
} else { 
//如果向下滾動的距離小原來導(dǎo)航欄離頂部的距離，則重新計(jì)算導(dǎo)航欄的位置 
a_navigation_bar[0].style.top = (naviga_offsetTop - scrollTop) + "px"; 
} 
} 

//給導(dǎo)航條上四個tab，加上點(diǎn)擊事件。 
window.onload=function(){ 
var a_tabs = []; 
if( document.getElementsByClassName ){//Chrome, FF 
a_tabs = document.getElementsByClassName("tab"); 
}else{ //IE 
a_tabs = my_getElementsByClassName("tab"); 
} 

var a_contents = []; 
if( document.getElementsByClassName ){//Chrome, FF 
a_contents = document.getElementsByClassName("content"); 
}else{//IE 
a_contents = my_getElementsByClassName("content"); 
} 

//獲取offsetLeft，即導(dǎo)航欄離左邊框的距離 
var a_main_div = []; 
if( document.getElementsByClassName ){//Chrome, FF 
a_main_div = document.getElementsByClassName("main"); 
}else{ //IE 
a_main_div = my_getElementsByClassName("main"); 
} 
naviga_offsetLeft = a_main_div[0].offsetLeft; 

a_tabs[0].onclick=function(){ 
window.scrollTo(0, a_contents[2].offsetTop); 
} 
a_tabs[1].onclick=function(){ 
window.scrollTo(0, a_contents[3].offsetTop); 
} 
a_tabs[2].onclick=function(){ 
window.scrollTo(0, a_contents[4].offsetTop); 
} 
a_tabs[3].onclick=function(){ 
window.scrollTo(0, a_contents[5].offsetTop); 
} 

//獲取頁面上，導(dǎo)航條到頂部的位置 
var a_navigation_bar = []; 
if(document.getElementsByClassName){//Chrome, FF 
a_navigation_bar = document.getElementsByClassName("navigation"); 
} else {//IE 
a_navigation_bar = my_getElementsByClassName("navigation"); 
} 
//獲取offsetTop 
naviga_offsetTop = a_navigation_bar[0].offsetTop; 
a_navigation_bar[0].style.left = naviga_offsetLeft + "px"; 

//給滾動條以及鼠標(biāo)加上滾動事件 
if( window.attachEvent) //IE 
{ 
window.attachEvent("onmousewheel", naviga_stay_top); 
window.attachEvent("onscroll", naviga_stay_top); 

document.attachEvent("onmousewheel", naviga_stay_top); 
document.attachEvent("onscroll", naviga_stay_top); 
} else {//Chrome ,FF 
window.addEventListener("mousewheel", naviga_stay_top,false); 
window.addEventListener("scroll", naviga_stay_top,false); 

document.addEventListener("mousewheel", naviga_stay_top,false); 
document.addEventListener("scroll", naviga_stay_top,false); 
} 
} 

在這個問題中，理解CSS+DIV定位(relative,absolute,static,fixed)的區(qū)別很重要。

relative,absolute,static,fixed

先看下各個屬性值的定義：

1、static：默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

2、relative：生成相對定位的元素，通過top,bottom,left,right的設(shè)置相對于其正常位置進(jìn)行定位?？赏ㄟ^z-index進(jìn)行層次分級。

3、absolute：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定?？赏ㄟ^z-index進(jìn)行層次分級。

4、fixed：生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定?？赏ㄟ^z-index進(jìn)行層次分級。

static與fixed的定位方式較好理解，在此不做分析。下面對應(yīng)用的較多的relative和absolute進(jìn)行分析：

1、relative。定位為relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在。如圖1：

圖1
黃色背景的層定位為relative，紅色邊框區(qū)域?yàn)槠湓谡Ａ髦械奈恢?。在通過top、left對其定位后，從灰色背景層的位置可以看出其正常位置依然存在。

2、absolute。定位為absolute的層脫離正常文本流，但與relative的區(qū)別是其在正常流中的位置不在存在。如圖2：

圖2
可以看到，在將黃色背景層定位為absolute后，灰色背景層自動補(bǔ)上。

3、relative與absolute的主要區(qū)別：

首先，是上面已經(jīng)提到過的在正常流中的位置存在與否。

其次，relative定位的層總是相對于其最近的父元素，無論其父元素是何種定位方式。如圖3：

圖3
圖中，紅色背景層為relative定位，其直接父元素綠色背景層為默認(rèn)的static定位。紅色背景層的位置為相對綠色背景層top、left個20元素。而如果紅色背景層定位為absolute，則情形如圖4：

圖4
可以看到，紅色背景層依然定義top:20px；left:20px；但其相對的元素變?yōu)槎ㄎ环绞綖閍bsolute或relative的黃色背景層。因此，對于absolute定位的層總是相對于其最近的定義為absolute或relative的父層，而這個父層并不一定是其直接父層。如果其父層中都未定義absolute或relative，則其將相對body進(jìn)行定位，如圖5：