JS implements navigation bar hover effect_javascript skills

JS-实现导航栏悬停

先布个局：

复制代码 代码如下:

1

tab1

tab2

tab3

tab4

2

3

4

5

6

7

添加简单的样式：

复制代码 代码如下:

div.main{
width: 800px;
background: #CCC;
margin: 10px auto 0;
position: relative;
}

div.content{
width: 800px;
height: 400px;
background: yellow;
margin: 10px auto 0;
}

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

div.tab{
width: 195px;
height: 40px;
background: blue;
float: left;
margin-left: 5px;
}

JS:

复制代码 代码如下:

//Record the original position of the navigation bar on the page
var naviga_offsetTop = 0;

//IE7 does not recognize getElementsByClassName. For compatibility, customize a
function my_getElementsByClassName(class_name ) {
var el = [];
//Get all elements
_el = document.getElementsByTagName('*');
//Select by className
for (var i= 0; i<_el.length; i ) {
if (_el[i].className == class_name ) {
el[el.length] = _el[i];
}
}
return el;
}

//Navigation bar, hover at the top
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;

if( scrollTop > naviga_offsetTop){
a_navigation_bar[0].style.top = scrollTop "px";
} else {
a_navigation_bar[0].style.top = naviga_offsetTop "px";
}
}


//Add four tabs to the navigation bar and add click events .
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");
}

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

//Get the navigation bar to the top of the page Position
var a_navigation_bar = [];
if(document.getElementsByClassName){//Chrome, FF
a_navigation_bar = document.getElementsByClassName("navigation");
} else {//IE
a_navigation_bar = my_getElementsByClassName("navigation");
}
naviga_offsetTop = a_navigation_bar[0].offsetTop;

//Add scrolling events to the scroll bar and mouse
// window. onscroll= naviga_stay_top;
// document.onmousewheel= naviga_stay_top;
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 ; Or when the mouse wheel is turned, the navigation bar will shake; but there are no problems on Chrome and FF. I'm hoping for some advice from an expert.