浅谈jquery电梯事件

初学电梯事件

1.本人第一次用jquery做电梯事件，在此分享一些经验,小白一个，若有更好的方法，请随时指正

先引入jquery库

<script src="js/jquery.min.js"></script>

首先是显示与隐藏，个人觉得用fadeIn（），fadeOut（）效果会更好些，
当页面滚动到目标是显示

  toggelTop()
    function toggelTop(){
        if($(document).scrollTop() >= top){
            $(".fixedtool").fadeIn()
        }else{
            $(".fixedtool").fadeOut()
        }
    }

电梯事件主要有两点核心，
一：点击小li跳转到对应的小li
利用jquery库的隐式迭代

 // 点击左边的小li，滚动到对应的位置
    $(".fixedtool li").click(function(){
        var current = $(".floor .w").eq($(this).index()).offset().top
        $("body,html").stop().animate({
            scrollTop:current
        })//只有元素能做动画
        // 同时修改背景色
        $(this).addClass("current").siblings().removeClass()
    })
})

二：页面滚动到某个内容区域，左边电梯导航小li相应添加和删除current类名
利用each（），遍历模块的数量，若页面滚动到该模块到上方的距离时

   $(window).scroll(function(){
    toggelTop()
    //  页面滚动到第几个，左边索引对应到第几个
            $(".floor .w").each(function(i,ele){
                if($(document).scrollTop() >= $(ele).offset().top){
                   //  console.log(i);
                   $(".fixedtool li").eq(i).addClass("current").siblings().removeClass()
                }
           })
   })

这时还有一个小bug，若点击左侧小li时，会自上而下开始，因为在页面滚动是会给对应的左侧添加和current类名，
可利用节流阀来控制

思路真的很重要