JS-实现导航栏悬停（续）

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

//记录导航条原来在页面上的位置  
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);  
    }  
}