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

请问错哪了?为什么没有定位导航的效果?

<!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 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: #0088bb;

}

#content .item{

padding: 20px;

margin-bottom: 20px;

border:1px dotted #0088bb;

}

#content .item{

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;

}


</style>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>

<script>

$(document).ready(function(e) {

        //滚动条发生滚动

$(window).scroll(function(){

//在这里,我们做一些事情

var top = $(document).scrollTop();

var menu = $("#menu");

var items = $("#content").find(".item");

var currentId = "";//当前所在的楼层(item)id

items.each(function(){

var m = $(this);

var itemTop = m.offset().top;

if(top > itemTop - 200){

currentId = "#" + m.attr("id");

}else{

return false;

}

});

var currentLink = menu.find(".current");

if (currentId && currentLink.attr("href") |= currentId){

currentLink.removeClass("current");

menu.find("[href=" + currentId + "]").addClass("current");

}

//console.log(top)

});

    });

</script>

</head>


<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="../../../images/star/8.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/8.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/8.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/8.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/8.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/8.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/8.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/8.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/8.jpg" alt="" /></a></li>

        </ul>

    </div>

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

    <h2>2F 女装</h2>

        <ul>

        <li><a href="#"><img src="../../../images/star/6.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/6.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/6.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/6.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/6.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/6.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/6.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/6.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/6.jpg" alt="" /></a></li>

        </ul>

    </div>

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

    <h2>3F 美妆</h2>

        <ul>

        <li><a href="#"><img src="../../../images/star/7.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/7.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/7.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/7.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/7.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/7.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/7.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/7.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/7.jpg" alt="" /></a></li>

        </ul>

    </div>

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

    <h2>4F 数码</h2>

        <ul>

        <li><a href="#"><img src="../../../images/star/11.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/11.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/11.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/11.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/11.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/11.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/11.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/11.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/11.jpg" alt="" /></a></li>

        </ul>

    </div>

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

    <h2>5F 母婴</h2>

        <ul>

        <li><a href="#"><img src="../../../images/star/16.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/16.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/16.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/16.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/16.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/16.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/16.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/16.jpg" alt="" /></a></li>

            <li><a href="#"><img src="../../../images/star/16.jpg" alt="" /></a></li>

        </ul>

    </div>

</div>


</body>

</html>


正在回答

2 回答

if (currentId && currentLink.attr("href") |= currentId)这里错了  是!    不是 |

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

荣耀zyy 提问者

非常感谢!跪拜大神!
2016-09-23 回复 有任何疑惑可以回复我~

不好意思 这个我不会

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

举报

0/150
提交
取消

请问错哪了?为什么没有定位导航的效果?

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