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

滾動(dòng)沒有效果，而且也沒有顯示錯(cuò)誤，麻煩大神幫幫忙指出（已解決）

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml"?xml:lang="en">
<head>
<meta?http-equiv="Content-Type"?content="text/html;charset=UTF-8">
<title>楓林購物網(wǎng)-網(wǎng)頁定位導(dǎo)航效果</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:?#08b;
}
#content?.item{
????????????padding:?20px;
????????????margin-bottom:?20px;/*樓層間有距離*/
????????????border:?1px?solid?#08b;
}
#content?.item?h2{
????????????font-size:?16px;
????????????font-weight:?bold;
????????????border-bottom:?2px?solid?#08b;
????????????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;/*先居中再設(shè)外邊距*/
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-color:?#08b;
}
/*hack*/
*html,?*html?body{
????????????background-image:url(about:blank);
????????????background-attachment:fixed;
????????}?
????????*html?#menu{
?????????position:?fixed;
?????????position:?absolute;
????????????top:?expression(((e=documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
????????}
</style>
<script>
???//根據(jù)class?name獲取元素
???function?getElementsByClassName(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;
???}
????????function?hasClass(obj,cls){
?????????return?obj.className.match(new?RegExp("(\\s|^)"?+?cls?+?"(\\s|$)"));
????????}
????????function?removeClass(obj,cls){
?????????if(hasClass(obj,cls)){
?????????//remove
?????????var?reg?=?new?RegExp("(\\s|^)"?+?clas?+?"(\\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?=?getElementsByClassName(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){
????//給正確的menu下的a元素?class屬性
????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">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)</h2>
<div?id="item1">
<h2>1F男裝</h2>
<ul>
<li><a?href="#"><img?src="images/1F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/1F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/1F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/1F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/1F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/1F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/1F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/1F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/1F.jpg"?alt=""?/></a></li>
</ul>
</div>
<div?id="item2">
<h2>12F女裝</h2>
<ul>
<li><a?href="#"><img?src="images/2F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/2F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/2F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/2F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/2F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/2F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/2F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/2F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/2F.jpg"?alt=""?/></a></li>
</ul>
</div>
<div?id="item3">
<h2>3F美妝</h2>
<ul>
<li><a?href="#"><img?src="images/3F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/3F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/3F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/3F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/3F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/3F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/3F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/3F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/3F.jpg"?alt=""?/></a></li>
</ul>
</div>
<div?id="item4">
<h2>4F數(shù)碼</h2>
<ul>
<li><a?href="#"><img?src="images/4F.png"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/4F.png"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/4F.png"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/4F.png"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/4F.png"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/4F.png"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/4F.png"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/4F.png"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/4F.png"?alt=""?/></a></li>
</ul>images/
</div>
<div?id="item5">
<h2>5F母嬰</h2>
<ul>
<li><a?href="#"><img?src="images/5F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/5F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/5F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/5F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/5F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/5F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/5F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/5F.jpg"?alt=""?/></a></li>
<li><a?href="#"><img?src="images/5F.jpg"?alt=""?/></a></li>
</ul>
</div>
</div>
</body>
</html>