如何用JavaScript 实现 iOSwebView里面Html界面导航栏置顶效果

JavaScript021

如何用JavaScript 实现 iOSwebView里面Html界面导航栏置顶效果,第1张

//记录导航条原来在页面上的位置

var naviga_offsetTop = 0

var naviga_offsetLeft = 0

//IE7不识别getElementsByClassName,为了兼容自定义一个

function my_getElementsByClassName(class_name) {

var el = []

//获取所有元素

_el = document.getElementsByTagName('*')

//通过className刷选

for (var i=0i<_el.lengthi++ ) {

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)

}

}

一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下:

<div class="nav">这里是导航所在的DIV容器。</div>

CSS代码:

.nav{

position:fixed/* 绝对定位,fixed是相对于浏览器窗口定位。 */

top:0/* 距离窗口顶部距离 */

left:0/* 距离窗口左边的距离 */

width:100%/* 宽度设置为100% */

height:40px/* 高度 */

z-index:99/* 层叠顺序,数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */

}

设置方式,原理及大致内容请看css代码注释