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

top打印發(fā)現一直等于0. 沒有顯示想要的效果

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8"/>
<title>地狗購物網——網頁定位導航效果</title>
<style>
????????*?{
????????????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;
????????}

????????/*ie6?hack*/
????????*?html,?*?html?body?{
????????????background-image:?url(about:blank);
????????????background-attachment:?fixed;
????????}

????????*?html?#menu?{
????????????/*position:?fixed;*/
????????????position:?absolute;
????????????top:?expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
????????}

</style>
<script>
????
??//定義getByClassName函數，讓函數實現根據class?name獲取對象并返回
????function?addClass(obj,cls){
????????if(!hasClass(obj,cls)){
???????????obj.className+="?"+cls;
????????}
????}
????
	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|^)"?+?cls?+?"(\\s|$)");
			obj.className?=?obj.className.replace(reg,?"");
		}
	}
	
	
????//定義getByClassName函數，讓函數實現給對象增加class?
????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.onload?=?function(){?
		
	????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;
				}			
			}
		
		?				
??????//請補充此處代碼，給正確的menu下的a元素class賦值current
??????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>

Andrew_liu

2014-11-17

源自：網頁定位導航特效 6-4

關注問題我要回答

1633

操作

收起

1 回答

Andrew_liu 提問者
2014-11-17

發(fā)現代碼主要有兩個問題,一個是top的兼容問題,?var top = document.documentElement.scrollTop || document.body.scrollTop;就可以了, 另一個是最后調用addClass和removeClass分別是兩個自定義函數,不能用點語法