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

使用js寫的為什么沒有定位導航的效果呢，求幫忙看看

<!DOCTYPE?html>
<html>
<head>
	<meta?charset="utf-8">
	<title>地狗購物網(wǎng)-網(wǎng)頁定位導航效果</title>
	<style?type="text/css">
		*{
			margin:?0;
			padding:?0;
		}

		body{
			font-size:?12px;
			line-height:?1.7;
		}

		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
		}

		#content?.item?li?a?img{
			width:?230px;
			height:?230px;
			border:?none;
		}

		#menu{
			position:?fixed;
			top:?100px;
			/*先把元素設置在中部，再進行偏移*/
			left:?50%;
			margin-left:?400px;
			width:?80px;
		}

		#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;
		}
	</style>

	<script?src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<!--?	<script>
		$(document).ready(function(){

			$(window).scroll(function(){
				
				var?top?=?$(document).scrollTop();
				var?menu?=?$("#menu");
				var?items?=?$("#content").find(".item")

				var?currentId?=?"";

				items.each(function(){
					var?m?=?$(this);
					var?itemTop?=?m.offset().top;
					if(top?>?itemTop?-?200){
						currentId?=?"#"?+?m.attr("id");
					}
					else{
						return?false;
					}
				});

				var?currentLink?=?menu.find(".current");
				if?(?currentId?&&?currentLink.attr("href")?!=?currentId){
					currentLink.removeClass("current");
					menu.find("[href="?+?currentId?+?"]").addClass("current");

			}



			});
		});
	</script>?-->
	<script?type="text/javascript">

		//
		function?getByClass(obj,?cls){
			var?elements?=?obj.getElementsByClassName("*");
			var?result?=?[];
			for?(var?i?=?0;?i?<?elements.length;?i++){
				if(elements[i].className?==?cls?){
					result.push(elements[i]);
				}
			}
			return?result;
		}

		function?hasClass(obj,?cls){
			return?obj.className.match(new?RegExp("(\\s|^)"?+?cls?+?"(\\s|$)"))

		}

		function?removeClass(obj,?cls){
			if?(hasClass(obj,?cls)){
				var?reg?=?new?RegExp("(\\s|^)"?+?cls?+?"(\\s|$)");
				obj.className?=?obj.className.replace(reg,?"");
			}
		}

		function?addClass(?obj,?cls){
			if?(!hasClass(?obj,?cls)){
				obj.className?+=?"?"?+?cls;
			}
		}



		window.onload?=?function(){
			window.onscroll?=?function(){
				var?top?=?document.documentElement???document.documentElement.scrollTop?:document.body.scrollTop;
				var?menus?=?document.getElementById("menu").getElementsByTagName("a")
				var?items?=?getByClass(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){
					//
					for(?var?j?=?0;?j?<?menus.length;?j++){
						var?_menu?=?menus[j];
						var?_href?=?_menu.href.split("#");

						if?(_href[_href.length?-?1]?!=?currentId){
							removeClass(?_menu,?"current");
						}
						else{
							addClass(?_menu,?"current");
						}
					}
				}
				
			}
		}
	</script>


</head>
<body>
<div?id="menu">
	<ul>
		<li><a?href="#item1"?class='current'>1F?男裝</a></li>
		<li><a?href="#item2">2F?女裝</a></li>
		<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>地狗購物網(wǎng)</h1>
	<div?id="item1"?class="item">
		<h2>1F?男裝</h2>
		<ul>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
		</ul>
		
	</div>	<div?id="item2"?class="item">
		<h2>2F?女裝</h2>
		<ul>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
		</ul>
		
	</div>	<div?id="item3"?class="item">
		<h2>3F?美妝</h2>
		<ul>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
		</ul>
		
	</div>	<div?id="item4"?class="item">
		<h2>4F?數(shù)碼</h2>
		<ul>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
		</ul>
		
	</div>	<div?id="item5"?class="item">
		<h2>5F?母嬰</h2>
		<ul>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
			<li><a?href="#"><img?src="1.jpg"></a></li>
		</ul>
		
	</div>
</div>
</body>
</html>