欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2013年09月24日 16:02:46   作者:  
上次導(dǎo)航欄懸停的那個(gè)頁(yè)面在IE上運(yùn)行的時(shí)候,會(huì)出導(dǎo)航欄不停的抖動(dòng)問(wèn)題,在本文已有完美的解決方法,將導(dǎo)航欄的定位方式由原來(lái)的absolute改為fixed即可

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

解決方法如下:

將導(dǎo)航欄的定位方式由原來(lái)的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)行定位的,所以原來(lái)給導(dǎo)航欄的定位都得改變。
復(fù)制代碼 代碼如下:

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

//IE7不識(shí)別getElementsByClassName,為了兼容自定義一個(gè)
function my_getElementsByClassName(class_name) {
var el = [];
//獲取所有元素
_el = document.getElementsByTagName('*');
//通過(guò)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òng)的距離大于原來(lái)導(dǎo)航欄離頂部的距離
//直接將導(dǎo)航欄固定到可視區(qū)頂部
if( scrollTop > naviga_offsetTop ){
a_navigation_bar[0].style.top = 0 + "px";
} else {
//如果向下滾動(dòng)的距離小原來(lái)導(dǎo)航欄離頂部的距離,則重新計(jì)算導(dǎo)航欄的位置
a_navigation_bar[0].style.top = (naviga_offsetTop - scrollTop) + "px";
}
}

//給導(dǎo)航條上四個(gè)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);
}

//獲取頁(yè)面上,導(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";

//給滾動(dòng)條以及鼠標(biāo)加上滾動(dòng)事件
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);
}
}

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

relative,absolute,static,fixed

先看下各個(gè)屬性值的定義:

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

2、relative:生成相對(duì)定位的元素,通過(guò)top,bottom,left,right的設(shè)置相對(duì)于其正常位置進(jìn)行定位。可通過(guò)z-index進(jìn)行層次分級(jí)。

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

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

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

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

圖1
黃色背景的層定位為relative,紅色邊框區(qū)域?yàn)槠湓谡A髦械奈恢谩T谕ㄟ^(guò)top、left對(duì)其定位后,從灰色背景層的位置可以看出其正常位置依然存在。

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

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

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

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

其次,relative定位的層總是相對(duì)于其最近的父元素,無(wú)論其父元素是何種定位方式。如圖3:

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

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

圖5
除top、left、right、bottom定位外,margin屬性值的定義也符合上述規(guī)則。

相關(guān)文章

最新評(píng)論