网页定位导航
一个循环判断当前滚动到的位置，另一个循环遍历导航条判断其id是否与滚动到的位置相同
效果如图：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>地狗购物网--网页定位导航效果</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 body{ 12 font-size: 12px; 13 line-height: 1.7; 14 } 15 li{ 16 list-style: none; 17 } 18 #content{ 19 width: 800px; 20 margin: 0 auto; 21 padding: 20px; 22 } 23 #content h1{ 24 color: #0088bb; 25 } 26 #content .item{ 27 padding: 20px; 28 margin-bottom: 20px; 29 border: 1px dotted #0088bb; 30 } 31 #content .item h2{ 32 font-size: 12px; 33 font-weight: bold; 34 border-bottom: 2px solid #0088bb; 35 margin-bottom: 10px; 36 } 37 #content .item li{ 38 display: inline; 39 margin-left:10px ; 40 } 41 #content .item li a img{ 42 width: 230px; 43 height: 230px; 44 border: none; 45 } 46 #menu{ 47 position: fixed; 48 top: 100px; 49 left: 50%; 50 margin-left: 400px; 51 width: 80px; 52 } 53 #menu ul li a{ 54 display: block; 55 margin: 5px 0; 56 font-size: 14px; 57 font-weight: bold; 58 color: #333; 59 width: 80px; 60 height: 50px; 61 line-height: 50px; 62 text-align: center; 63 text-decoration: none; 64 } 65 #menu ul li a:hover{ 66 color: #fff; 67 background: #0088bb; 68 } 69 #menu ul li .current{ 70 color: #fff; 71 background: #0088bb; 72 } 73 </style> 74 <script type="text/javascript"> 75 window.onload = function(){ 76 window.onscroll=function(){ 77 var top = document.documentElement.scrollTop || document.body.scrollTop; 78 var menus = document.getElementById("menu").getElementsByTagName("a"); 79 var items=document.getElementById("content").getElementsByClassName("item"); 80 81 var currentId=""; 82 for(var i=0;i<items.length;i++){ 83 var _item=items[i]; 84 var _itemTop = _item.offsetTop; 85 if(top>_itemTop - 200){ 86 currentId=_item.id; 87 }else{ 88 break; 89 } 90 } 91 if(currentId!=""){ 92 //给正确的menu下的a元素class赋值 93 for(var j=0;j<menus.length;j++){ 94 var _menu=menus[j]; 95 var _href=_menu.href.split("#");//因为只通过href获取的链接为一长串链接，需要通过#分成数组 96 if(_href[_href.length-1]!=currentId){ 97 _menu.className = ""; 98 }else{ 99 _menu.className = " current"; 100 } 101 } 102 } 103 } 104 } 105 </script> 106 </head> 107 <body> 108 <div id="menu"> 109 <ul> 110 <li><a href="#item1" class="current">1F 男装</a></li> 111 <li><a href="#item2">2F 女装</a></li> 112 <li><a href="#item3">3F 美妆</a></li> 113 <li><a href="#item4">4F 数码</a></li> 114 <li><a href="#item5">5F 母婴</a></li> 115 </ul> 116 </div> 117 <div id="content"> 118 <h1>地狗购物网</h1> 119 <div id="item1" class="item"> 120 <h2>1F 男装</h2> 121 <ul> 122 <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li> 123 <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li> 124 <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li> 125 <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li> 126 <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li> 127 <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li> 128 <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li> 129 <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li> 130 <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li> 131 </ul> 132 </div> 133 <div id="item2" class="item"> 134 <h2>2F 女装</h2> 135 <ul> 136 <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li> 137 <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li> 138 <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li> 139 <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li> 140 <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li> 141 <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li> 142 <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li> 143 <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li> 144 <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li> 145 </ul> 146 </div> 147 <div id="item3" class="item"> 148 <h2>3F 美妆</h2> 149 <ul> 150 <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li> 151 <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li> 152 <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li> 153 <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li> 154 <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li> 155 <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li> 156 <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li> 157 <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li> 158 <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li> 159 </ul> 160 </div> 161 <div id="item4" class="item"> 162 <h2>4F 数码</h2> 163 <ul> 164 <li><a href="#"><img src="img/4F.png" alt=""/></a></li> 165 <li><a href="#"><img src="img/4F.png" alt=""/></a></li> 166 <li><a href="#"><img src="img/4F.png" alt=""/></a></li> 167 <li><a href="#"><img src="img/4F.png" alt=""/></a></li> 168 <li><a href="#"><img src="img/4F.png" alt=""/></a></li> 169 <li><a href="#"><img src="img/4F.png" alt=""/></a></li> 170 <li><a href="#"><img src="img/4F.png" alt=""/></a></li> 171 <li><a href="#"><img src="img/4F.png" alt=""/></a></li> 172 <li><a href="#"><img src="img/4F.png" alt=""/></a></li> 173 </ul> 174 </div> 175 <div id="item5" class="item"> 176 <h2>5F 母婴</h2> 177 <ul> 178 <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li> 179 <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li> 180 <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li> 181 <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li> 182 <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li> 183 <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li> 184 <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li> 185 <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li> 186 <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li> 187 </ul> 188 </div> 189 </div> 190 </body> 191 </html>
