仿淘宝 纵向滚动式 定位 导航栏

效果图如下：欢迎拍砖（照片小生p的，不要怪偶清泉啊）

制作思路：1、分左右两块，左边div是内容区域（其中嵌套五个div，每一楼是一个div）；

2、右边div是菜单，是由ul>li组成的无序列表

3、获取鼠标滚轮滚动事件，根据scrollTop()，offset().top这两个方法获得楼层距网页顶部的高度差，来判断当前的楼层位置；

4、利用jquery，动态地改变菜单样式

附代码：

1、html标签

<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><img src="1.jpg" alt=""/></li>
    <li><img src="1.jpg" alt=""/></li>
    <li><img src="1.jpg" alt=""/></li>
    <li><img src="1.jpg" alt=""/></li>
    <li><img src="1.jpg" alt=""/></li>
    </ul></div>
    <div id="item2" class="item"><h2>2F 女装</h2>
    <ul>
        <li><img src="2.jpg" alt=""/></li>
        <li><img src="2.jpg" alt=""/></li>
        <li><img src="2.jpg" alt=""/></li>
        <li><img src="2.jpg" alt=""/></li>
        <li><img src="2.jpg" alt=""/></li>
    </ul></div>
    <div id="item3" class="item"><h2>3F 童装</h2>
    <ul>
        <li><img src="3.jpg" alt=""/></li>
        <li><img src="3.jpg" alt=""/></li>
        <li><img src="3.jpg" alt=""/></li>
        <li><img src="3.jpg" alt=""/></li>
        <li><img src="3.jpg" alt=""/></li>
    </ul></div>
    <div id="item4" class="item"><h2>4F 秋装</h2>
    <ul>
        <li><img src="4.jpg" alt=""/></li>
        <li><img src="4.jpg" alt=""/></li>
        <li><img src="4.jpg" alt=""/></li>
        <li><img src="4.jpg" alt=""/></li>
        <li><img src="4.jpg" alt=""/></li>
    </ul></div>
    <div id="item5" class="item"><h2>5F 冬装</h2>
    <ul>
        <li><img src="5.jpg" alt=""/></li>
        <li><img src="5.jpg" alt=""/></li>
        <li><img src="5.jpg" alt=""/></li>
        <li><img src="5.jpg" alt=""/></li>
        <li><img src="5.jpg" alt=""/></li>
    </ul></div>
</div>

2、css样式

  

    *{
        margin: 0;
        padding: 0;
    }
    body{
        font-size: 12px;
        line-height: 1.7;
    }
    li{
        list-style: none;
    }
#content{
    width: 690px;
    margin: 0 auto;
    padding:10px;
}
    #content h1{
        color: #c6c6c6;
    }
    #content .item{
        padding: 10px;
        margin-bottom: 20px;
        border: 2px dotted #f4f4f4;
    }
    #content .item h2{
        font-size: 16px;
        font-weight: bold;
        border-bottom: 2px solid #c3c3c3;
        margin-bottom: 10px;
    }
    #content .item li{
        display: inline;
        margin-right: 10px;
    }
#menu{
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: 345px;
    width: 80px;
}
    #menu ul li a {
        display: block;
        margin: 5px 0;
        font-size: 14px;
        font-weight: bold;
        color: #c3c3c3;
        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: #aa11aa;
    }

3、最终实现js

    $(window).scroll(function(){
        var top=$(document).scrollTop();
        var menu=$("#menu");
        var items=$("#content").find(".item");
        var currentId="";
        items.each(function(){
            var m=$(this);
            var itemTop= m.offset().top;
            if(top>itemTop-300){
                currentId="#"+ m.attr("id");
            }else{
                return false;
            }
        })
        var currentLink=menu.find(".current");
        if(currentId&¤tLink.attr("href")!=currentId){
            currentLink.removeClass("current");
            menu.find("[href="+currentId+"]").addClass("current");
        }
    })