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的事件。