电梯导航

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);
            });
        });
});