jquery电梯导航案例
卡卡西最近怎么样 人气:0前言：
日常生活中用手机，电脑浏览网页时，滑到了页面下端后想返回顶部 或 跳转到页面别的版块，用鼠标滚动很麻烦，网页电梯导航 就可以很方便的精准到达目标版块。
一：效果展示
【gif 动图演示】格式转换有些不清晰请谅解！功能实现包含以下：
- 点击电梯导航切换到对应板块
- 移动光标导航栏对应板块跟着移动
二：实现原理剖析
重点来啦！！！
2.1 网页结构：
结构上分了两部分，一部分是网页版块 banner-box，另一部分是网页导航版块 map-box，用了固定定位定在了右侧，打开页面是不显示的，要滚动至第三个版块后才会显示导航
<div class="banner-box">
<div class="banner1">版 块 一</div>
<div class="banner2">版 块 二</div>
<div class="banner3">版 块 三</div>
<div class="banner4">版 块 四</div>
<div class="banner5">版 块 五</div>
<div class="banner6">版 块 六</div>
<div class="banner7">版 块 七</div>
<div class="banner8">版 块 八</div>
<div class="banner9">版 块 九</div>
</div>
<div class="map-box">
<ul>
<li class="map">版块1</li>
<li class="map">版块2</li>
<li class="map">版块3</li>
<li class="map">版块4</li>
<li class="map">版块5</li>
<li class="map">版块6</li>
<li class="map">版块7</li>
<li class="map">版块8</li>
<li class="map">版块9</li>
</ul>
</div>2.2 显示隐藏函数 实现分析：
此块显示隐藏的代码封装在了一个单独的函数内，这是为了解决一个 bug 而方便调用，当代码移动到第三个板块往后时，刷新页面，此时虽然页面在第三个版块后，但是导航缺没有显示，这就需要单独写个函数方便调用 ----- 打开页面就调用一次
- 所需知识点：scrollTop()，offset().top
- 思路分析：利用 offset().top 获取到第三个版块到页面顶部的距离，然后使用scrollTop() 获取到页面卷上去的距离，判断是否大于这个距离，大于就使用 fadein 淡入，否则就使用 fadeout 淡出
function block_hide(){
var three_top=$('.banner3').offset().top;
if($(document).scrollTop()>=three_top){
$('.map-box').fadeIn(700)
}else{
$('.map-box').fadeOut(700)
}
}2.3 点击导航滚至对应板块 实现分析：
此版块实现的是点击导航滚动到对应模块的实现，代码中标记互斥锁的地方先忽略，这是为了解决一些小 bug，互斥锁在后面的分析中提及。
- 所需知识点：animate()，offset().top
- 思路分析：点击后，排他思想，自己变色（添加了变化类current）兄弟不变色，使用 index() 方法获取到点击的导航的索引值，再将此索引值匹配到对应的版块上，得到其版块的到页面顶部的距离，执行动画函数 animate 使页面上卷这段距离即可
$('.map').click(function(){
flag=false; //互斥锁节流阀
$(this).siblings().removeClass('current')
$(this).addClass('current')
var index=$(this).index();
distance=$('.banner-box').children().eq(index).offset().top+2;
// console.log(distance)
$('html').stop().animate({
'scrollTop':distance
},1000,'swing',function(){
flag=true; //互斥锁节流阀
})
})2.4 页面滚动导航对应选择实现分析：
此版块解释如何 滚动网页至对应板块，让导航也跟着选择，一样的是互斥锁标记先忽略
加载全部内容