1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>吸顶导航特效</title> 6 <style type="text/css"> 7 body{ 8 margin: 0; 9 padding: 0; 10 } 11 .main{ 12 width: 100%; 13 background: #ccc; 14 margin: 10px auto 0; 15 position: relative; 16 } 17 .content{ 18 width: 100%; 19 height: 400px; 20 background: #0FF2D8; 21 margin: 10px auto 0; 22 line-height: 400px; 23 24 } 25 .navigation{ 26 width: 100%; 27 height: 40px; 28 background: #E589B4; 29 margin: auto 0; 30 top: 400px; 31 left: 0; 32 position: absolute; 33 } 34 .tab{ 35 width: 180px; 36 height: 40px; 37 background: #DB3179; 38 float: left; 39 margin-left: 5px; 40 line-height: 40px; 41 text-align: center; 42 } 43 #div1{ 44 width: 100px; 45 height: 100px; 46 background: green; 47 position: fixed; 48 bottom: 0; 49 right: 0; 50 display: none; 51 line-height: 100px; 52 text-align: center; 53 54 } 55 </style> 56 <script type="text/javascript"> 57 window.onload = function(){ 58 var navigaOffsetTop = 0; 59 function my_getElementsByClassName(class_name){ 60 var arr = []; 61 elements = document.getElementsByTagName('*'); 62 for (var i = 0; i < elements.length; i++) { 63 if(elements[i].className == class_name){ 64 arr[arr.length] = elements[i]; 65 66 } 67 } 68 return arr; 69 } 70 //导航条悬停在顶部 71 function navigaStayTop(){ 72 var navigationBar = []; 73 if(document.getElementsByClassName){ 74 navigationBar = document.getElementsByClassName('navigation'); 75 }else{ 76 //非标准IE下 77 navigationBar = my_getElementsByClassName('navigation'); 78 } 79 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 80 if (scrollTop > navigaOffsetTop){ 81 navigationBar[0].style.top = scrollTop + "px"; 82 } else{ 83 navigationBar[0].style.top = navigaOffsetTop + "px"; 84 } 85 } 86 //给导航条上七个tab加上点击事件 87 var tabs = []; 88 if(document.getElementsByClassName){ 89 tabs = document.getElementsByClassName('tab'); 90 }else{ 91 tabs = my_getElementsByClassName("tab"); 92 } 93 94 var contents = []; 95 if (document.getElementsByClassName) { 96 contents = document.getElementsByClassName('content'); 97 98 } else{ 99 //Ie 100 contents = my_getElementsByClassName('content'); 101 }; 102 tabs[0].onclick=function(){ 103 window.scrollTo(0, contents[2].offsetTop); 104 } 105 tabs[1].onclick=function(){ 106 window.scrollTo(0, contents[3].offsetTop); 107 } 108 tabs[2].onclick=function(){ 109 window.scrollTo(0, contents[4].offsetTop); 110 } 111 tabs[3].onclick=function(){ 112 window.scrollTo(0, contents[5].offsetTop); 113 } 114 tabs[4].onclick=function(){ 115 window.scrollTo(0, contents[6].offsetTop); 116 } 117 tabs[5].onclick=function(){ 118 window.scrollTo(0, contents[7].offsetTop); 119 } 120 tabs[6].onclick=function(){ 121 window.scrollTo(0, contents[8].offsetTop); 122 } 123 124 //获取页面上导航条到顶部的位置 125 var navigationBar = []; 126 if (document.getElementsByClassName) { 127 navigationBar = document.getElementsByClassName('navigation'); 128 129 } else{ 130 navigationBar = my_getElementsByClassName('navigation'); 131 132 } 133 navigaOffsetTop = navigationBar[0].offsetTop; 134 135 136 //给滚动条以及鼠标加上滚动事件 137 // window.onscroll= naviga_stay_top; 138 // document.onmousewheel= navigaStayTop; 139 if(window.attachEvent){ 140 window.attachEvent("onmousewheel", navigaStayTop); 141 window.attachEvent("onscroll", navigaStayTop); 142 143 document.attachEvent("onmousewheel", navigaStayTop); 144 document.attachEvent("onscroll", navigaStayTop); 145 146 }else{ 147 window.addEventListener("mousewheel", navigaStayTop,false); 148 window.addEventListener("scroll", navigaStayTop,false); 149 150 document.addEventListener("mousewheel", navigaStayTop,false); 151 document.addEventListener("scroll", navigaStayTop,false); 152 153 } 154 //回到顶部 155 var div1 = document.getElementById('div1'); 156 window.onscroll = function(){ 157 var t = window.pageYOffset; 158 if (t>200) { 159 div1.style.display = 'block'; 160 161 } else{ 162 div1.style.display = 'none'; 163 164 } 165 } 166 div1.onclick = function(){ 167 window.scrollTo(0,0); 168 } 169 170 171 } 172 </script> 173 </head> 174 <body> 175 <div class="main"> 176 <div class="content">1</div> 177 <div id="nav" class="navigation"> 178 <div class="tab">概念</div> 179 <div class="tab">设计</div> 180 <div class="tab">功能</div> 181 <div class="tab">操作系统</div> 182 <div class="tab">技术规格</div> 183 <div class="tab">购买方式</div> 184 <div class="tab">付款方式</div> 185 </div> 186 <div class="content">2</div> 187 <div class="content">3</div> 188 <div class="content">4</div> 189 <div class="content">5</div> 190 <div class="content">6</div> 191 <div class="content">7</div> 192 <div class="content">8</div> 193 <div class="content">9</div> 194 <div class="content">10</div> 195 </div> 196 <div id="div1">回到顶部</div> 197 </body> 198 </html>
效果图：
