仿京东的楼梯选项卡

http://download.csdn.net/download/qq_33769914/9970445看代码到这里

点击某个选项卡页面就下滑到那个部分。当下拉到那个部分，导航也默认的选中那个导航。

需要考虑点击时和滚动条滚动，两个状态，但是注意你点击选项卡后页面就滚动了，那么他也触发了滚动事件。所有会执行这两个鼠标事件。一定不能冲突。否则你可能会出错。

一般网上的楼梯写法都是知道每个部分的高度的在css里面已经自己定义了，所以就很适用。但是如果我们是没有设置高度，也获取不到高度怎么办呢？那种写法就不管用了。。

这是右侧导航。

<div class="nav">
  <span  class="floor_item active"><img src="img/nav1.png"/></span>
  <span  class="floor_item"><img src="img/nav2.png"/></span>
  <span  class="floor_item"><img src="img/nav3.png"/></span>
  <span  class="floor_item"><img src="img/nav4.png"/></span>
  <span class="floor_item"><img src="img/nav5.png"/></span>
</div>

这是对应的一个个导航的内容

<div class="section">
 <div id="section1" class="part">内容1</div>

                        <div id="section2" class="part">内容2</div>

                        <div id="section3" class="part">内容3</div>

                       <div id="section4" class="part">内容4</div>

                       <div id="section5" class="part">内容5</div>

</div>

对于点中就跳到相应的部分，你可以选择用锚地来

<a href="#section1">第一个部分</a>

<div id="section1">我是第一个部分的具体内容</div>

点击那个a自动的页面就调到了id为section1的地方。

或者是

写一个函数，确定那个a对应部分距离顶部的距离。$("#section1").offset().top;

//点击导航页面滚动到对应的那个part的地方
$('.nav > .floor_item').click(function(){
if($(this).index() >= 0 && $(this).index() < 5){
var i = $(this).index() ;
var floorT = $('.part').eq(i).offset().top;
$('html,body').animate({
scrollTop:floorT + 'px'
},200);
}
});

滚动条滚动的时候

$(document).scroll(function(){
//固定导航大于600就固定
if($(this).scrollTop()>600){
$(".sheet3 .right").css({"position":"fixed","z-index":"2"})
}
else{$(".sheet3 .right").css({"position":"absolute"})}

$('.part').each(function(i){ //在这里each的时候获取到，你如果在外面each得到这个floorArr数组，在这个里面循环，可能就有点问题，现在我也不知道为什么。
var floorT = $('.part').eq(i).offset().top;  //每个part对应的距离顶端的距离
var scrollT = $(document).scrollTop();
var wHeight = $(window).height();
if(scrollT>floorT -wHeight/2){
$('.floor_item').eq(i).addClass('active').siblings().removeClass('active');
}
});
});

不知道你注意到没有，我在点击的时候只让他滚动到指定的地方。并没有说给点中的加一个active。因为点击滚动后执行了滚动事件，在这个事件里面加的active的事件。