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

哪位大神幫我找找錯，滑動滾輪樓層不跳轉

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<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:#08b;

? #content .item{

padding:20px;

margin-bottom:20px;

border:1px dotted #08b;

} ? ?

#content .item h2{

font-size:16px;

font-weight:bold;

border: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;

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:#08b;

}

</style>

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;

}

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(req,"");

}

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=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){

for(var j=0;j<menus.length;j++){

var _menu=menus[i];

var _href=_menu.href.split("#");

if(_href[_href.length-1]!=currentId){

removeClass(_menu,"current");

}else{

addClass(_menu,"current");

}

</script>

<body>

? <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 數碼</a></li>

? ? ?<li><a href="#item5">5F 母嬰</a></li>

? </ul>

</div>

? <h1>地狗購物網</h1>

?<div id="item1" class="item">?

?<h2>1F 男裝</h2>

? <ul>

? ? <li><a href="#"><img src="image/導航/1F.jpg" alt=""></a></li>

? ? <li><a href="#"><img src="image/導航/1F.jpg" alt=""></a></li> ? ?

? </ul>

?</div>

?<div id="item2" class="item">

?<h2>2F 女裝</h2>?

? <ul>

? ? <li><a href="#"><img src="image/導航/2F.jpg" alt=""></a></li>

? ? <li><a href="#"><img src="image/導航/2F.jpg" alt=""></a></li> ? ?

? </ul>

?</div>

?<div id="item3" class="item">?

?<h2>3F 美裝</h2>

? <ul>

? ? <li><a href="#"><img src="image/導航/3F.jpg" alt=""></a></li>

? ? <li><a href="#"><img src="image/導航/3F.jpg" alt=""></a></li> ? ?

? </ul>

?</div>

?<div id="item4" class="item">?

?<h2>4F 數碼</h2>

? <ul>

? ? <li><a href="#"><img src="image/導航/4F.png" alt=""></a></li>

? ? <li><a href="#"><img src="image/導航/4F.png" alt=""></a></li> ? ?

? </ul>

?</div>

?<div id="item5" class="item">?

?<h2>5F 母嬰</h2>

? <ul>

? ? <li><a href="#"><img src="image/導航/5F.jpg" alt=""></a></li>

? ? <li><a href="#"><img src="image/導航/5F.jpg" alt=""></a></li> ? ?

? </ul>

?</div>

</div>

</body>

</html>

慕仙4324424

2016-11-24

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

關注問題我要回答

940

操作

收起

4 回答

weixin_慕無忌2239137
2021-03-09

removeClass函數里的obj.className=obj.className.replace(req,"");

改成obj.className=obj.className.replace(reg,"");

if(currentId){

for(var j=0;j<menus.length;j++){

var _menu=menus[i];

中的var _menu=menus[i];

改成

var _menu=menus[j];

雖然晚了幾年

0 回復有任何疑惑可以回復我~

收起回答

慕仙4324424 提問者
2016-11-25

把你的代碼替換上去，才會顯示報錯

0 回復有任何疑惑可以回復我~

收起回答

慕粉3116392
2016-11-25

這個var top=document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;;無論你怎么滾動它都等于undefined；把他改為var top=document.documentElement.scrollTop||document.body.scrollTop;

0 回復有任何疑惑可以回復我~

收起回答