jquery电梯导航案例

卡卡西最近怎么样 2022-06-03 我要评论

前言：

日常生活中用手机，电脑浏览网页时，滑到了页面下端后想返回顶部或跳转到页面别的版块，用鼠标滚动很麻烦，网页电梯导航 就可以很方便的精准到达目标版块。

一：效果展示

【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 页面滚动导航对应选择实现分析：

此版块解释如何滚动网页至对应板块，让导航也跟着选择，一样的是互斥锁标记先忽略

jquery电梯导航案例

前言：

一：效果展示

二：实现原理剖析

2.1 网页结构：

2.2 显示隐藏函数实现分析：

2.3 点击导航滚至对应板块实现分析：

2.4 页面滚动导航对应选择实现分析：

相关文章

猜您喜欢

今日热门

jquery电梯导航案例

前言：

一：效果展示

二：实现原理剖析

2.1 网页结构：

2.2 显示隐藏函数 实现分析：

2.3 点击导航滚至对应板块 实现分析：

2.4 页面滚动导航对应选择实现分析：

相关文章

猜您喜欢

今日热门

2.2 显示隐藏函数实现分析：

2.3 点击导航滚至对应板块实现分析：