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>
效果图：
时间： 2024-10-12 16:40:03