课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

来源：6-3 使用JS实现函数

慕仙4324424

2016-11-24 13:40

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


写回答 关注

4回答

  • weixin_慕无忌2239137
    2021-03-09 18:37:41

    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 0
  • 慕仙4324424
    2016-11-25 12:47:46

    把你的代码替换上去，才会显示报错

    0 0
  • 慕粉3116392
    2016-11-25 10:23:57

    这个var top=document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;;无论你怎么滚动它都等于undefined；把他改为var top=document.documentElement.scrollTop||document.body.scrollTop;

    0 0
  • qq_如果云知道_5
    2016-11-24 22:02:21

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

    1 0

    慕仙4324...

    哥们儿，你在逗我吧，括号不多不少啊

    2016-11-25 12:46:13

    共 1 条回复 >

网页定位导航特效

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

71404 学习 · 486 问题

查看课程

相似问题

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

回答 1

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

回答 2

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

回答 5

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

回答 1

大家帮忙找错

回答 3

打开慕课网App查看更多内容