如何使用jquery库实现电梯导航效果

这篇文章主要介绍如何使用jquery库实现电梯导航效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

基本思路

电梯导航基本上就是使用元素距离页面头部的高度offsetTop和页面滚动的距离scrollTop来进行比较事项相应的效果。

1、页面滚动到相应的位置，实现电梯导航的显示与隐藏
2、页面滚动到相应的位置，电梯导航的按钮添加或者移出相应的类
3、点击电梯导航按钮，实现页面的滚动和为按钮添加或者移出相应的类
4、点击顶部按钮，返回顶部

代码实现

html代码

<div class="header">头部</div> <div class="banner">焦点图</div>     <div class="content">         <div class="qinzi w">亲子</div>         <div class="liren w">丽人</div>         <div class="xuexi w">学习</div>         <div class="lvyou w">旅游</div>         <div class="zhusu w">住宿</div>         <div class="meishi w">美食</div>     </div>     <div class="footer">尾部</div>     <!-- 电梯导航 -->     <div class="floor" >         <ul>             <li>亲子</li>             <li>丽人</li>             <li>学习</li>             <li>旅游</li>             <li>住宿</li>             <li>美食</li>         </ul>         <span>顶部</span> </div>

css代码

 *{             padding: 0;             margin: 0;         }         body {             font-size: 30px;         }         .header {             width: 1100px;             height: 200px;             background-color: pink;             margin: 0 auto;         }         .banner {             width: 1100px;             height: 400px;             background-color: skyblue;             margin: 0 auto;         }         .footer {             width: 1100px;             height: 300px;             background-color: darkolivegreen;             margin: 0 auto;         }         .content {             width: 1100px;             margin: 0 auto;         }         .content .qinzi {             width: 100%;             height: 324px;             background-color: rosybrown;         }         .content .liren {             width: 100%;             height: 304px;             background-color: slategrey;         }         .content .xuexi {             width: 100%;             height: 300px;             background-color: khaki;         }         .content .lvyou {             width: 100%;             height: 300px;             background-color: greenyellow;         }         .content .zhusu {             width: 100%;             height: 300px;             background-color: darkcyan;         }         .content .meishi {             width: 100%;             height: 300px;             background-color: lightgreen;         }         .floor {             width: 50px;             position: fixed;             top: 150px;             left: 50%;             margin-left: -620px;             font-size: 16px;             text-align: center;         }         .floor li {             width: 50px;             height: 30px;             background-color: grey;             margin-bottom: 5px;             line-height: 30px;             list-style: none;             cursor: pointer;         }         span {             display: block;             width: 50px;             height: 30px;             background-color: grey;             margin-bottom: 5px;             line-height: 30px;             list-style: none;             cursor: pointer;         }         .floor .current {             background-color: hotpink;         }

JavaScript代码

var flag = true;  //使用节流阀         //页面刚开始隐藏，当页面滚动到content的时候，电梯导航显示         $(function () {             //页面刷新时调用一次             //封装函数，切换显示与隐藏             var contentTop = $(".content").offset().top;             toggleTool();             function toggleTool() {                 if ($(document).scrollTop() >= contentTop) {                     $(".floor").fadeIn();                 } else {                     $(".floor").fadeOut();                 }             }             $(window).scroll(function () {                 toggleTool()                 //页面滚动到相应位置，电梯导航按钮添加current类                 if (flag) {                     $('.content .w').each(function (i, ele) {                         var cuHeight = ele.offsetHeight / 2;                         if ($(document).scrollTop() >= $(ele).offset().top - cuHeight) {                             $('.floor li').eq(i).addClass('current').siblings().removeClass();                         }                     })                 }             })             //点击电梯导航按钮，页面跳转到相应位置，使用jquery里面的animate             $('.floor li ').click(function () {                 flag = false;                 $(this).addClass('current').siblings().removeClass();                 var index = $(this).index();                 var current = $('.content .w').eq(index).offset().top;                 $('html,body').stop().animate({                     scrollTop: current                 }, function () {                     flag = true;                 })             })             $('.floor span').click(function () {                 $(this).addClass('current');                 $('html,body').stop().animate({                     scrollTop: 0                 })       }) })

以上是“如何使用jquery库实现电梯导航效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！