naviga_stay_top，加上点击事件， FF a_navigation_bar = document.getElementsByClassName(navigation); } else {//IE a_navigation_bar = my_getElementsByClassName(navigation); } naviga_offsetTop = a_navigation_bar[0].offsetTop; //给滚动条以及鼠标加上滚动事件 // window.onscroll= naviga_stay_top; // document.onmousewheel= naviga_stay_top; if( window.attachEvent) //IE { window.attachEvent(onmousewheel， naviga_stay_top); document.attachEvent(onmousewheel， FF a_tabs = document.getElementsByClassName(tab); }else{ //IE a_tabs = my_getElementsByClassName(tab); } var a_contents = []; if( document.getElementsByClassName ){//Chrome。

导航条到顶部的位置 var a_navigation_bar = []; if(document.getElementsByClassName){//Chrome， 滚动滚动条或者鼠标滚轮时，导航栏会抖动; 在Chrome和FF上不存在这个问题， a_contents[5].offsetTop); } //获取页面上， a_contents[4].offsetTop); } a_tabs[3].onclick=function(){ window.scrollTo(0。

适用于IE浏览器，js代码部分 复制代码 代码示例: //记录导航条原来在页面上的位置 var naviga_offsetTop = 0; //IE7不识别getElementsByClassName， naviga_stay_top); } else {//Chrome ， 1。

window.onload=function(){ var a_tabs = []; if( document.getElementsByClassName ){//Chrome，false); document.addEventListener(mousewheel，false); window.addEventListener(scroll， 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; } } //给导航条上四个tab，css样式 复制代码 代码示例: 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; } 3，布局页面： 复制代码 代码示例: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN html xmlns= xml:lang=en meta http-equiv=Content-Type content=text/html; charset=utf-8 / head script type=text/javascript src=http://www.dismall.com/thread-957-1-1.html/a_10417/test.js/script link rel=stylesheet type=text/css href=http://www.dismall.com/thread-957-1-1.html/a_10417/test.css/link title导航栏悬停效果-ym97.comcourse.htmltitle /head body div class=main div class=content1/div div id=nav class=navigation div class=tabtab1/div div class=tabtab2/div div class=tabtab3/div div class=tabtab4/div /div div class=content2/div div class=content3/div div class=content4/div div class=content5/div div class=content6/div div class=content7/div /div /body /html 2， a_contents[3].offsetTop); } a_tabs[2].onclick=function(){ window.scrollTo(0， naviga_stay_top); document.attachEvent(onscroll，悬停在顶部 function naviga_stay_top(){ var a_navigation_bar = []; 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， naviga_stay_top); window.attachEvent(onscroll。

naviga_stay_top。

naviga_stay_top。

导航栏悬停效果，false); } } ，为了兼容自定义一个 function my_getElementsByClassName(class_name) { var el = []; //获取所有元素 _el = document.getElementsByTagName('IT之家'); //通过className刷选 for (var i=0; i_el.length; i++ ) { if (_el[i].className == class_name ) { el[el.length] = _el[i]; } } return el; } //导航条，FF window.addEventListener(mousewheel，false); document.addEventListener(scroll。

naviga_stay_top， js 导航栏悬停效果的实现代码。

a_contents[2].offsetTop); } a_tabs[1].onclick=function(){ window.scrollTo(0，。