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，以像素计。此方法只对可见元素有效。

电梯导航的结构布局怎么做？

布局这一块并不是固定的，只要效果达到就好。

<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>

电梯导航的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>

怎么实现最终的效果？

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