                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /網(wǎng)頁定位導(dǎo)航特效

JS原生代碼去實(shí)現(xiàn)網(wǎng)頁定位導(dǎo)航問題，滾動(dòng)時(shí)導(dǎo)航不變是什么原因？

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
	<style?type="text/css">
	*{margin:?0;?padding:?0;}
body{font-size:?12px;?line-height:?1.6;}
li{list-style:?none;}
#content{width:?800px;?margin:?0?auto;?padding:?20px;}
#content?h1{color:?#0088bb;}
#content?.item{padding:?20px;?margin-bottom:?20px;?border:?1px?dotted?#0088bb;}
#content?.item?h2{font-size:?16px;?font-weight:?bold;?border-bottom:?2px?solid?#0088bb;?margin-bottom:?10px;}
#content?.item?li{display:?inline;?margin-right:?10px;}/*display:?inline;讓li里的圖片依次排列*/
#content?.item?li?a?img{width:?234px;?height:?234px;?border:?none;}
#menu{position:?fixed;?top:?100px;?left:?50%;?margin-left:?400px;?width:?80px;}
/*菜單固定位置不動(dòng)用fixed,left:?50%是讓元素先居中，然后再根據(jù)外部div（content）的寬度設(shè)置margin-left,這里的400為div寬度的一半*/
#menu?ul?li?a?{display:?block;?margin:?5px?0;?font-size:?14px;?font-weight:?bold;?color:?#333;?width:?80px;?height:?50px;?line-height:?50px;?text-decoration:?none;?text-align:?center;}
#menu?ul?li?a:hover,#menu?ul?li?a.current{color:?#fff;?background:?#0088bb;}
/*IE測試工具：IETrster，，IE6不支持fixed,所以要加上一下代碼*/
*?html,?*?html?body{background-image:?url(about:blank);?background-attachment:?fixed;}
*?html?#menu?{position:?absolute;?top:?expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop）+?100'px')；}
	</style>
<script?type="text/javascript">
//?IE瀏覽器對getElementByClassName()方法支持較差，解決方法(粗略)：
//?在外面重新寫一個(gè)方法
function?getByClassName(obj,cls){
var?elements?=?obj.getElementsByTagName("*");
var?result?=?[];
for?(var?i?=?0;?i?<?elements.length;?i++)?{
if?(elements[i].className?==?cls)?{
result.push(elements[i]);
}
}
return?result;
}

window.onscroll?=?function(){
var?top?=?document.documentElement???document.documentElement.scrollTop?:?document.body.scrollTop;
var?menus?=?document.getElementById("menu").getElementsByTagName("a");
var?items?=?getByClassName(document.getElementById("content"),?"item");
var?currentId?="";
for(var?i?=?0;?i?<?items.length;??i++){
var?_item?=?items[i];
var?_itemTop?=?_item.offsetTop;
if?(top?>?_itemTop?-200)?{
currentId?=?_item.id;
}else?{
break;
}
}
if?(currentId)?{
//?給焦點(diǎn)a賦樣式
for(var?j?=?0;?j?<?menus.length;?j++){
var?_menu?=?menus[j];
var?_href?=?_menu.href.split("#");
if?(_href[_href.length-1]?!=?currentId)?{
_menu.removeClass("current");
}?else{
_menu.addClass("current");
}
}
}
}
</script>

<title>網(wǎng)頁定位導(dǎo)航</title>
</head>
<body>
<div?id="menu">?<!--?div#menu?ctrl+e?生成下列代碼?-->
<ul>?<!--?ul>li*5>a?ctrl+e?生成下列代碼?-->
<li><a?href="#item1">1F?男裝</a></li>
<li><a?href="#item2">2F?女裝</a></li><!--?#item2現(xiàn)在統(tǒng)一用ID做錨點(diǎn)鏈接?-->
<li><a?href="#item3">3F?沒妝</a></li>
<li><a?href="#item4">4F?數(shù)碼</a></li>
<li><a?href="#item5">5F?母嬰</a></li>
</ul>
</div>
<div?id="content">
<h1>聚聚服飾</h1>
<div?id="item1">
<h2>1樓男裝</h2>
<ul>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
</ul>
</div>
<div?id="item2">
<h2>2樓女裝</h2>
<ul>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
</ul>
</div>
<div?id="item3">
<h2>3樓美妝</h2>
<ul>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
</ul>
</div>
<div?id="item4">
<h2>4樓數(shù)碼</h2>
<ul>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
</ul>
</div>
<div?id="item5">
<h2>5樓母嬰</h2>
<ul>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
<li><a?href="#"><img?src="images/1.jpg"?alt="..."></a></li>
</ul>
</div>
</div>
</body>
</html>