scroll()和scrollTop()方法——实现电商网站中的电梯导航

要想实现电商网站的电梯导航效果，首先需要了解以下知识点：

jquery 事件 - scroll() 方法

对元素滚动的次数进行计数，当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

jquery CSS 操作 - scrollTop() 方法

设置元素中滚动条的垂直偏移，scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置；scroll top offset 指的是滚动条相对于其顶部的偏移；如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
【scrollTop()俗称“卷边函数”，获取到的是当滚动条滚动时，该页面文档被浏览器最顶端所卷去的高度；另外还有scrollLeft()方法，顾名思义是被浏览器最左端所卷去的距离】

jQuery CSS 操作 - offset() 方法

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

1. 电梯导航的结构布局怎么做？
   布局这一块并不是固定的，只要效果达到就好。

   <ul class="dianTi">
           <li>
               1F
               <div class="wenZi">服饰</div>
           </li>
           <li>
               2F
               <div class="wenZi">美妆</div>
           </li>
           <li>
               3F
               <div class="wenZi">手机</div>
           </li>
           <li>
               4F
               <div class="wenZi">家电</div>
           </li>
           <li>
               5F
               <div class="wenZi">数码</div>
           </li>
       </ul>

2. 电梯导航的CSS样式该怎么写？
   宽度可以给一个固定的值；高度本应该由JS去控制，这里是给的固定的值；定位方式采用的是固定定位，让它垂直到中间，水平先到浏览器的中间，然后设置margin-left为负的网页版心的一半距离，这样就紧贴在页面左侧位置了；默认是隐藏的。

   <style type="text/css">
           .dianTi{width: 30px; height: 150px; position: fixed; top: 50%; margin-top: -75px;
               left: 50%; margin-left: -660px; color: #666; cursor: pointer; display: none;}
           .dianTi li{height: 29px; border-bottom: 1px dotted #ccc; text-align: center;
               line-height: 29px; position: relative;}
           .wenZi{width: 29px; height: 29px; position: absolute; left: 0; top: 0; color: #C81623;
               background: #fff; display: none;}
           .dianTi li.current .wenZi{display: block;}
           .dianTi li:hover .wenZi{display: block; background: #C81623; color: #fff;}
       </style>

3. 怎么实现最终的效果？
   1.电商网站一般是吧商品分为一楼、二楼、三楼…所以，第一步先要获取每一个楼层相对于document (0,0)的距离。

   //检测楼层时，跳转时，不需要那么精确，所以减去100
   var f1Top=$('.f1').offset().top-100;
   var f2Top=$('.f2').offset().top-100;
   var f3Top=$('.f3').offset().top-100;
   var f4Top=$('.f4').offset().top-100;
   var f5Top=$('.f5').offset().top-100;

   2.检测楼层，用scrollTop()方法获取当滚动条滚动时每次最新的被卷去的高度，即当前可视区域内最顶部距离document (0,0)的距离，然后拿这个距离的值去和之前得到的每个楼层对应的值进行比较，就可以知道当前滚动条滚动到哪个区域了。这里最好将这个功能性的模块封装起来，写成一个方法，然后用$(window).scroll(jianCe)去调用。

   var jianCe=function(){
       var windowScrollTop=$(window).scrollTop();
   
       if(windowScrollTop>=f5Top){
           console.log('到达5楼');
           //到达5楼
           $('.dianTi').show();
           $('.dianTi li').eq(4).addClass('current').siblings('li').removeClass('current');
       }else if(windowScrollTop>=f4Top){
           console.log('到达4楼');
           //到达4楼
           $('.dianTi').show();
           $('.dianTi li').eq(3).addClass('current').siblings('li').removeClass('current');
       }else if(windowScrollTop>=f3Top){
           console.log('到达3楼');
           //到达3楼
           $('.dianTi').show();
           $('.dianTi li').eq(2).addClass('current').siblings('li').removeClass('current');
       }else if(windowScrollTop>=f2Top){
           console.log('到达2楼');
           //到达2楼
           $('.dianTi').show();
           $('.dianTi li').eq(1).addClass('current').siblings('li').removeClass('current');
       }else if(windowScrollTop>=f1Top){
           console.log('到达1楼');
           //到达一楼
           $('.dianTi').show();
           $('.dianTi li').eq(0).addClass('current').siblings('li').removeClass('current');
       }else{
           //不再5楼中的任意一层时，让电梯导航隐藏
           $('.dianTi').hide();
       }
   }

   3.当点击左侧电梯导航时，也需要对应起来，因为在点击时，按钮会有一个特殊类用于突出显示，如果从5层跳到1层，会经过4,3,2，这样就会看到整个跳转的过程，所以，这里需要用到一个off（）方法，用于取消绑定事件，$(window).off(‘scroll’); 因为你移除了scroll事件，当前这个LI具备特殊类名还要再书写一次，最后只需要判断当前点击的是第几层，做相应的操作即可。

      $('.dianTi li').click(function(event) {
           //在动画运动的过程中，不希望current特殊类名跟着满世界跑
           //所以把让current满世界跑的源头掐掉
           //源头：$(window).scroll()
           $(window).off('scroll');
           //因为你移除了scroll事件，当前这个LI具备特殊类名还要再书写一次
           $(this).addClass('current').siblings('li').removeClass('current');
           //需要知道现在要往几层楼跳
           //得到当前这个LI的序号，这个序号加1就是你需要去的楼层
           var i=$(this).index()+1;
           if(i==5){
               //要往第5层跳
               //检测楼层时，希望的差不多到了；跳转时，需要精确，所以再加上100
               //f5Top是5层距离document （0，0）点的距离
               //但是当动画执行完毕了，还要继续检测楼层
               $('html,body').stop().animate({'scrollTop':f5Top+100}, 500,function(){
                   $(window).scroll(jianCe);
               }); 
           }else if(i==4){
               $('html,body').stop().animate({'scrollTop':f4Top+100}, 500,function(){
                   $(window).scroll(jianCe);
               });
           }else if(i==3){
               $('html,body').stop().animate({'scrollTop':f3Top+100}, 500,function(){
                   $(window).scroll(jianCe);
               });
           }else if(i==2){
               $('html,body').stop().animate({'scrollTop':f2Top+100}, 500,function(){
                   $(window).scroll(jianCe);
               });
           }else if(i==1){
               $('html,body').stop().animate({'scrollTop':f1Top+100}, 500,function(){
                   $(window).scroll(jianCe);
               });
           }
       });