首页 > Js开发 > JS-实现导航栏悬停

JS-实现导航栏悬停

先布个局:

 

[html][/html] view plaincopy

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.         <head>
  5.                 <script type="text/javascript" src="test.js"></script>
  6.                 <link rel="stylesheet" type="text/css" href="test.css"></link>
  7.                 <title>Test</title>
  8.         </head>
  9. <body>
  10.         <div class="main">
  11.                 <div class="content">1</div>
  12.                 <div id="nav" class="navigation">
  13.                         <div class="tab">tab1</div>
  14.                         <div class="tab">tab2</div>
  15.                         <div class="tab">tab3</div>
  16.                         <div class="tab">tab4</div>
  17.                 </div>
  18.                 <div class="content">2</div>
  19.                 <div class="content">3</div>
  20.                 <div class="content">4</div>
  21.                 <div class="content">5</div>
  22.                 <div class="content">6</div>
  23.                 <div class="content">7</div>
  24.         </div>
  25. </body>
  26. </html>

添加简单的样式:

 

 

[css][/css] view plaincopy

  1. div.main{
  2.         width: 800px;
  3.         background: #CCC;
  4.         margin: 10px auto 0;
  5.         position: relative;
  6. }
  7. div.content{
  8.         width: 800px;
  9.         height: 400px;
  10.         background: yellow;
  11.         margin: 10px auto 0;
  12. }
  13. div.navigation{
  14.         width: 800px;
  15.         height: 40px;
  16.         background: red;
  17.         margin: 4px auto 0;
  18.         top: 400px;
  19.         left: 0px;
  20.         position: absolute;
  21. }
  22. div.tab{
  23.         width: 195px;
  24.         height: 40px;
  25.         background: blue;
  26.         float: left;
  27.         margin-left: 5px;
  28. }

JS:

 

 

[javascript][/javascript] view plaincopy

  1. //记录导航条原来在页面上的位置
  2. var naviga_offsetTop = 0;
  3. //IE7不识别getElementsByClassName,为了兼容自定义一个
  4. function my_getElementsByClassName(class_name) {
  5.     var el = [];
  6.     //获取所有元素
  7.     _el = document.getElementsByTagName('*');
  8.     //通过className刷选
  9.     for (var i=0; i<_el.length; i++ ) {
  10.        if (_el[i].className == class_name ) {
  11.            el[el.length] = _el[i];
  12.         }
  13.    }
  14.    return el;
  15. }
  16. //导航条,悬停在顶部
  17. function naviga_stay_top(){
  18.     var a_navigation_bar = [];
  19.     if(document.getElementsByClassName){//Chrome, FF
  20.         a_navigation_bar = document.getElementsByClassName("navigation");
  21.     } else {//IE
  22.         a_navigation_bar = my_getElementsByClassName("navigation");
  23.     }
  24.     var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  25.     if( scrollTop > naviga_offsetTop){
  26.         a_navigation_bar[0].style.top = scrollTop + "px";
  27.     } else {
  28.         a_navigation_bar[0].style.top = naviga_offsetTop + "px";
  29.     }
  30. }
  31. //给导航条上四个tab,加上点击事件。
  32. window.onload=function(){
  33.     var a_tabs = [];
  34.     if( document.getElementsByClassName ){//Chrome, FF
  35.         a_tabs = document.getElementsByClassName("tab");
  36.     }else{ //IE
  37.         a_tabs = my_getElementsByClassName("tab");
  38.     }
  39.     var a_contents = [];
  40.     if( document.getElementsByClassName ){//Chrome, FF
  41.         a_contents = document.getElementsByClassName("content");
  42.     }else{//IE
  43.         a_contents = my_getElementsByClassName("content");
  44.     }
  45.     a_tabs[0].onclick=function(){
  46.         window.scrollTo(0, a_contents[2].offsetTop);
  47.     }
  48.     a_tabs[1].onclick=function(){
  49.         window.scrollTo(0, a_contents[3].offsetTop);
  50.     }
  51.     a_tabs[2].onclick=function(){
  52.         window.scrollTo(0, a_contents[4].offsetTop);
  53.     }
  54.     a_tabs[3].onclick=function(){
  55.         window.scrollTo(0, a_contents[5].offsetTop);
  56.     }
  57.     //获取页面上,导航条到顶部的位置
  58.     var a_navigation_bar = [];
  59.     if(document.getElementsByClassName){//Chrome, FF
  60.         a_navigation_bar = document.getElementsByClassName("navigation");
  61.     } else {//IE
  62.         a_navigation_bar = my_getElementsByClassName("navigation");
  63.     }
  64.     naviga_offsetTop = a_navigation_bar[0].offsetTop;
  65.     //给滚动条以及鼠标加上滚动事件
  66.     // window.onscroll= naviga_stay_top;
  67.     // document.onmousewheel= naviga_stay_top;
  68.     if( window.attachEvent) //IE
  69.     {
  70.         window.attachEvent("onmousewheel", naviga_stay_top);
  71.         window.attachEvent("onscroll", naviga_stay_top);
  72.         document.attachEvent("onmousewheel", naviga_stay_top);
  73.         document.attachEvent("onscroll", naviga_stay_top);
  74.     } else {//Chrome ,FF
  75.         window.addEventListener("mousewheel", naviga_stay_top,false);
  76.         window.addEventListener("scroll", naviga_stay_top,false);
  77.         document.addEventListener("mousewheel", naviga_stay_top,false);
  78.         document.addEventListener("scroll", naviga_stay_top,false);
  79.     }
  80. }

不知道什么原因,在IE上,滚动滚动条或者鼠标滚轮的时候,导航栏会抖动;而在Chrome和FF上有没有任何问题。

 

还望高人指点。。。


本文固定链接: http://www.devba.com/index.php/archives/2823.html | 开发吧

报歉!评论已关闭.