1. html重要部分代
<!-- 我的滚动是在这个class为aboutCon的div里面滚动-->
<div class="aboutCon">
<div class="aside">
<ul class="fixedAside">
<li class="floor1 floor1Active"></li>
<li class="floor2"></li>
<li class="floor3"></li>
<li class="floor4"></li>
<li class="floor5"></li>
</ul>
</div>
<!-内容部分-->
<div class="aboutSection">
<div class="aboutPart aboutPart1">..</div>
<div class="aboutPart aboutPart1">..</div>
<div class="aboutPart aboutPart1">..</div>
<div class="aboutPart aboutPart1">..</div>
<div class="aboutPart aboutPart1">..</div>
</div>
</div>
2.jquery部分
/*电梯导航*/
$(function(){
var jianCe=function(){
var h=$(".aboutCon").scrollTop();
if(h>=2200){
$('.fixedAside>li').removeClass("floor1Active floor2Active floor3Active floor4Active floor5Active");
$('.floor5').addClass("floor5Active");
}
else if(h>=1700){
$('.fixedAside>li').removeClass("floor1Active floor2Active floor3Active floor4Active floor5Active");
$('.floor4').addClass("floor4Active")
}
else if(h>=1100){
$('.fixedAside>li').removeClass("floor1Active floor2Active floor3Active floor4Active floor5Active");
$('.floor3').addClass("floor3Active");
}
else if(h>=400){
$('.fixedAside>li').removeClass("floor1Active floor2Active floor3Active floor4Active floor5Active");
$('.floor2').addClass("floor2Active");
}
else{
$('.fixedAside>li').removeClass("floor1Active floor2Active floor3Active floor4Active floor5Active");
$('.floor1').addClass("floor1Active");
}
};
$(".aboutCon").scroll(jianCe);
$(".fixedAside>li").click(function(event){
$('.fixedAside>li').removeClass("floor1Active floor2Active floor3Active floor4Active floor5Active");
var i=$(this).index();
var j=[0,530,1300,1990,2550];
var ihscr=j[i];
/*var iAct="floor"+(i+1)+"Active";
$(this).addClass(iAct);*/
//在动画运动的过程中,不希望导航选中状态一直变动
//所以把让current满世界跑的源头掐掉
//源头:$(window).scroll()
$(".aboutCon").off('scroll');
//因为你移除了scroll事件,当前这个LI具备特殊类名还要再书写一次
var iAct="floor"+(i+1)+"Active";
$(this).addClass(iAct);
$('.aboutCon').animate({scrollTop:ihscr},300,function(){
$('.aboutCon').scroll(jianCe);
});
});
});