为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/网页定位导航特效

哪位大神帮我找找错，滑动滚轮楼层不跳转

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; 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:#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>

<script>

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>

<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 数码</a></li>

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

  </ul>

</div>

<div id="content">

  <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>

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

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

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

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

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

    <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>

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

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

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

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

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

    <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>

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

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

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

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

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

    <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>

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

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

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

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

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

    <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>

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

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

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

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

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

    <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

关注问题 我要回答
874
操作
收起

正在回答

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 回复 有任何疑惑可以回复我~
收起回答
qq_如果云知道_5
2016-11-24

var items=getByClassName(document.getElementById("content"),"item");错误，多了一个)

0 回复 有任何疑惑可以回复我~
收起回答
#1

慕仙4324424 提问者

哥们儿，你在逗我吧，括号不多不少啊
2016-11-25 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
网页定位导航特效
  • 参与学习       71404    人
  • 解答问题       486    个

本课程讲解网页定位导航特效，仿天猫版地狗购物网，你值得拥有

进入课程

本课相似问答

1 回答求大神帮忙看看错哪里了 点了没定位楼层 滚动时候连蓝色背景都看不到了

2 回答求大神帮我找错，新手找了好几遍都找不到哪里错了。

5 回答求大神找出我到底哪里错了 自己找了3遍没找出

1 回答求大神帮忙看下哪里出错了,实现不了滚动效果

3 回答大家帮忙找错
搜索更多本课相关问答

哪位大神帮我找找错，滑动滚轮楼层不跳转

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信