2015-9-13(页面定位)

<!-- 分为左右两部分
1.左侧的内容，右侧悬浮的导航菜单 2.左侧滚动时，右侧内容不改变位置 3.点击右侧链接，左侧定位到相应的栏目 4.左侧滚动到相应的栏目，右侧定位到对应链接
-->

<!-- 实现方法 -->
<!-- 1.锚点：通过锚点来定位，但动画较死板 2.关于滚动条定位的事件和方法(jquery) -->

<!-- 技术点（scroll事件，scrollTop,offset()）
1.scroll([data,fn]):当用户滚动指定的元素时，会发生scroll事件。
scroll事件适用于所有可滚动的元素和window对象（浏览器窗口）
例如：当页面滚动条发生变化时，执行函数……；
$(window).scroll(function(){
/* code */
})
2.scrollTop([val]):获取/设置匹配元素相对滚动条顶部的偏移。
3.offset():获取匹配元素的相对偏移。返回的对象包含两个整形属性：top和left,以像素计。
-->

1.jquery实现代码

$(function(){
    var _win = $(window);
    var htmlTop = $("html,body");                //页面滚动的元素
    var oMenu = $("#menu");
    var MenuBtn = $("#menu").find("li");
    var items = $("#content").find(".item");
    var result = [];                            //用来保存内容区的offset().top值
    var currentId= "";                            //当前所在的楼层ID
    items.each(function(){                        //循环内容区楼层，返回所有楼层的offset().top值
        var itemTop = $(this).offset().top;
        itemTop += 200;
        result.push(itemTop);
        return result;                            //返回数组
    })
    _win.scroll(function(){                        //window滚动事件
        var win_top = $(document).scrollTop();    //滚动条
        if(win_top > result[0]){
            oMenu.addClass("nav_active");
        }else{
            oMenu.removeClass("nav_active");
        }
        items.each(function(){
            var itemTop = $(this).offset().top;        
            if(win_top > itemTop-400){
                currentId = $(this).attr("id");        //获取每个楼层的ID,currentId = item1,2,3,4,5
            }else{
                return false;
            }
        })
        MenuBtn.removeClass("current");

        MenuBtn.find("." + currentId).parent().addClass("current");            //导航中的class显示当前的楼层
    })
    MenuBtn.click(function(){
        var i = $(this).index();
        MenuBtn.eq(i).addClass("current").siblings().removeClass("current");
        if(i <= 4){
            htmlTop.animate({scrollTop:result[i]},300);
        }
    })
})

2.HTML,nav导航要与内容区有关联，用item1，2，3，4，5来联系

<div id="menu">
    <ul>
        <li class="current"><a href="javascript:;" class="item1">1F 男装</a></li>
        <li><a href="javascript:;" class="item2">2F 女装</a></li>
        <li><a href="javascript:;" class="item3">3F 美妆</a></li>
        <li><a href="javascript:;" class="item4">4F 数码</a></li>
        <li><a href="javascript:;" class="item5">5F 母婴</a></li>
    </ul>
</div>
<div id="content">
    <h1>title</h1>
    <div id="item1" class="item">
        <h2>1F 男装</h2>
        <ul>
            <li><a href="javascript:;"><img src="images/show/slider_1_01.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_01.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_01.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_01.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_01.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_01.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_01.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_01.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_01.jpg" alt="" /></a></li>
        </ul>
    </div>
    <div id="item2" class="item">
        <h2>2F 女装</h2>
        <ul>
            <li><a href="javascript:;"><img src="images/show/slider_1_02.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_02.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_02.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_02.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_02.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_02.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_02.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_02.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_02.jpg" alt="" /></a></li>
        </ul>
    </div>
    <div id="item3" class="item">
        <h2>3F 美妆</h2>
        <ul>
            <li><a href="javascript:;"><img src="images/show/slider_1_03.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_03.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_03.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_03.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_03.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_03.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_03.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_03.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_03.jpg" alt="" /></a></li>
        </ul>
    </div>
    <div id="item4" class="item">
        <h2>4F 数码</h2>
        <ul>
            <li><a href="javascript:;"><img src="images/show/slider_1_04.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_04.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_04.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_04.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_04.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_04.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_04.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_04.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_04.jpg" alt="" /></a></li>
        </ul>
    </div>
    <div id="item5" class="item">
        <h2>5F 母婴</h2>
        <ul>
            <li><a href="javascript:;"><img src="images/show/slider_1_05.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_05.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_05.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_05.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_05.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_05.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_05.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_05.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="images/show/slider_1_05.jpg" alt="" /></a></li>
        </ul>
    </div>
</div>