JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果(續(xù))
上次【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,就不抖了。。-_-||
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)航欄的定位都得改變。
//記錄導(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ī)則。
- JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果
- Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄
- js導(dǎo)航欄單擊事件背景變換示例代碼
- JS滾動(dòng)到指定位置導(dǎo)航欄固定頂部
- JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航欄變色特效
- 一步步教大家編寫酷炫的導(dǎo)航欄js+css實(shí)現(xiàn)
- 非常不錯(cuò)的一個(gè)JS分頁(yè)效果代碼,值得研究
- 純javascript實(shí)現(xiàn)分頁(yè)(兩種方法)
- 純js分頁(yè)代碼(簡(jiǎn)潔實(shí)用)
- javascript實(shí)現(xiàn)導(dǎo)航欄分頁(yè)效果
相關(guān)文章
javascript高級(jí)學(xué)習(xí)筆記整理
打算做一個(gè)js面向?qū)ο蟮呢澇陨?但是最終是流產(chǎn)了,整理了下廢棄的代碼,回顧了下PPT.想學(xué)習(xí)js面向?qū)ο蟮呐笥岩部梢詤⒖枷隆?/div> 2011-08-08javascript 自動(dòng)轉(zhuǎn)到命名錨記
javascript 自動(dòng)轉(zhuǎn)到命名錨記,方面業(yè)內(nèi)控制導(dǎo)航等信息2009-01-01微信小程序報(bào)錯(cuò):does?not?have?a?method?"xxxx"?to?ha
這篇文章主要給大家介紹了關(guān)于微信小程序報(bào)錯(cuò):does?not?have?a?method?"xxxx"?to?handle?event?"tap"的解決方案,文中將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01JS實(shí)現(xiàn)的驗(yàn)證身份證及獲取地區(qū)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的驗(yàn)證身份證及獲取地區(qū)功能,結(jié)合實(shí)例形式分析了JS字符串、數(shù)組及正則操作相關(guān)技巧,需要的朋友可以參考下2017-01-01JS基于設(shè)計(jì)模式中的單例模式(Singleton)實(shí)現(xiàn)封裝對(duì)數(shù)據(jù)增刪改查功能
這篇文章主要介紹了JS基于設(shè)計(jì)模式中的單例模式(Singleton)實(shí)現(xiàn)封裝對(duì)數(shù)據(jù)增刪改查功能.結(jié)合實(shí)例形式分析了javascript基于單例模式結(jié)合ajax針對(duì)數(shù)據(jù)庫(kù)進(jìn)行增刪改查的相關(guān)操作技巧,需要的朋友可以參考下2018-02-02JS把字符串轉(zhuǎn)成json對(duì)象的三種方法示例詳解
這篇文章主要介紹了js?把字符串轉(zhuǎn)成json對(duì)象的三種方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04最新評(píng)論