导航定位(利用锚点和jquery定位)

在网页中，点击按钮就会跳转到相应的位置，滑动页面，左边的列表颜色就会变化到相应的颜色,滚动条也会相应改变。
这个功能利用了jquery里的scroll事件。先讲点击列表，跳转到相应的位置。在html5之前，我们可以在每块的div中添加一个name，即锚点，然后html5之后，就移除了锚点的概念，因此，就可以利用id去实现，可以在每块的位置添加一个item，比如item1,item2,item3……..,然后在左边的里边中的li里添加相应的链接，比如链接到id为item1的位置，就是a href=“#item1” 这样，就可以实现点击左边的列表，跳转到相应的位置。
要做到实现拉动页面时左边列表背景色改变，就要用jquery ，用scroll()方法。要先获取第一个div和窗口最上方的距离，然后遍历item,然后判断高度是否超过了item的高度，然后获取到id名，接下来就是改变背景色，要先判断当前id和链接是否等与左边列表的当前id，如果不等于就相当于要改变颜色了，就要把之前的类名（即设置了背景名的css样式，我设置的是current）删除（removeClass）,然后在当前id中添加current类，这样一个简单的定位导航就实现了。

<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><!--这是左边列表的代码--

$(document).ready(function(){
//这是实现功能的jquery代码
/滚动条发生滚动/
(window).scroll(function(){  
            var top=(document).scrollTop();
var menu=(‘#menu’);  
            var items=(‘#content’).find(‘.item’);
var currentId=”“;//当前所在楼层ID
items.each(function(){/遍历/
var m=$(this);
var itemTop=m.offset().top;//offset返回匹配元素相对于文档的偏移（位置）
if(top>itemTop-200){
currentId=”#” + m.attr(‘id’);
}else{
return false;//跳出each
}
});
/给相应楼层添加current 取消其他的current/
var currentLink=menu.find(‘.current’);
if(currentId && currentLink.attr(‘href’)!=currentId){
currentLink.removeClass(‘current’);
menu.find(‘[href=”’+currentId+’”]’).addClass(‘current’);
}
//console.log(top);
});
});