當前位置:編程學習大全網 - 源碼下載 - 如何用JavaScript 實現 iOSwebView裏面Html界面導航欄置頂效果

如何用JavaScript 實現 iOSwebView裏面Html界面導航欄置頂效果

//記錄導航條原來在頁面上的位置

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;

}

//導航條,懸停在頂部

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;

//如果向下滾動的距離大於原來導航欄離頂部的距離

//直接將導航欄固定到可視區頂部

if( scrollTop > naviga_offsetTop ){

a_navigation_bar[0].style.top = 0 + "px";

} else {

//如果向下滾動的距離小原來導航欄離頂部的距離,則重新計算導航欄的位置

a_navigation_bar[0].style.top = (naviga_offsetTop - scrollTop) + "px";

}

}

//給導航條上四個tab,加上點擊事件。

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,即導航欄離左邊框的距離

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);

}

//獲取頁面上,導航條到頂部的位置

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";

//給滾動條以及鼠標加上滾動事件

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);

}

}

  • 上一篇:酒店pms是什麽意思
  • 下一篇:網站模塊化用什麽代碼做的啊就是現在很多網站那樣自由拖拽放到自己想放的地方
  • copyright 2024編程學習大全網