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

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

基本思路

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

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

代码实现

html代码

头部
焦点图
    
        
亲子
        
丽人
        
学习
        
旅游
        
住宿
        
美食
    
    
尾部
        
        
            
亲子
            
丽人
            
学习
            
旅游
            
住宿
            
美食
        
        顶部

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库实现电梯导航效果"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！