jQuery实现电梯导航

最新推荐文章于 2024-06-29 21:16:18 发布

zhanzhan0109

最新推荐文章于 2024-06-29 21:16:18 发布

阅读量909

点赞数 2

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_56836274/article/details/126601299

版权

知识点【大佬可略过这部分】

scrollTop()
- 这个函数得到的是文档被卷去的头部的长度
offset()
- 返回元素距离文档的偏移坐标。直接用这个函数得到一个对象，若想获得top和left值可用
```
$(element).offset().top;
$(element).offset().left;
```

jQuery的遍历操作

$(element).each(function(index,ele){
    
})
其中，index是这些元素集合中当前正在遍历的元素的索引号；ele是当前的元素，这个ele是一个js元素，若转化成jQuery元素则用$(ele);

jQuery的animate动画

$(element).animate({},callback(){})
第一个{}放动画要改变的样式
callback(){}是回调函数，当animate动画执行完毕，就会调用回调函数，可以利用回调函数来做节流阀。
jQuery的naimate动画函数可以让动画慢慢执行，而不是瞬间达到目标

电梯导航所需要的操作

显示和隐藏导航栏
当页面滚动到某个位置，则显示导航栏
点击导航栏可以让页面滚动到对应的部分，同时被点击的导航栏的样式也要发生改变
页面滚动到某个位置，导航栏样式也要跟着变化

代码讲解

（1）显示和隐藏导航栏

$(window).scroll(function () {
                //1:实现页面滑动显示隐藏导航栏
                if ($(document).scrollTop() > $('.banner1').offset().top) {
                    $('.nav').fadeIn();
                }
                else {
                    $('.nav').fadeOut();
                }
            })

当文档被卷去某个长度，就显示导航栏

（2）点击导航栏可以让页面滚动到对应的部分，同时被点击的导航栏的样式也要发生改变

// 2:点击导航栏，可以滚动到相应的内容区域处
            $('.nav div').click(function () {
                    var dis = $('.banner div').eq($(this).index()).offset().top;
                    $('html,body').stop().animate({
                        scrollTop: dis
                    });
                    // 点击了对应的导航栏也要相应的改变样式
                    $(this).addClass('current').siblings().removeClass();
                }
            })

首先得到要显示的区域距离文档顶部的距离dis，然后让文档被页面卷去的距离恰好就是dis。

$('html,body').stop().animate({
                        scrollTop: dis
                    });
这里因为animate动画的对象只能是元素，本来是文档document要进行动画的，但是它不是元素，所以就用html,body。
stop()的作用是停止元素之前进行的动画，再执行animate动画

（3）页面滚动到某个位置，导航栏样式也要跟着变化

$('.banner div').each(function (i, ele) {
                        if ($(document).scrollTop() >= $(ele).offset().top) {
                            $('.nav div').eq(i).addClass('current').siblings().removeClass();
                        }
                    })
用jQuery的each遍历，若发现内容区域有文档被卷去的距离大于或者等于该内容距离文档顶部的距离，则说明当前页面正在显示这部分的内容，遍历函数的参数有当前正在显示的内容的索引，通过索引改变导航栏的样式

（4)节流阀的应用

这里会有一个小bug,假设我先点击块1的导航栏，再点击块4的导航栏，会发现块1,2,3,4的导航栏的样式都会改变，这是我们不想要的。出现这个原因有可能是，当从块1切换到块4时，animate动画会经过块2,3,而我们实现了页面滑动到哪个位置对应内容的导航栏样式就要改变，所以就造成这样的bug。

如何解决呢？节流阀！用flag标记，当点击导航栏时，关闭节流阀(flag=false),什么时候开启节流阀呢？当动画执行完毕，也就是文档已经观点陪你过到相应的位置，此时在animate的回调函数里面开启节流阀。同时，在导航栏随文档滚动样式发生改变那也应该判断节流阀是否关闭。

if (flag) {
                    flag = false;
                    var dis = $('.banner div').eq($(this).index()).offset().top;
                    $('html,body').stop().animate({
                        scrollTop: dis
                    }, function () {
                        flag = true
                    });
                    // 点击了对应的导航栏也要相应的改变样式
                    $(this).addClass('current').siblings().removeClass();
                }

//3:页面滚动到某个区域，对应的导航栏样式也要发生改变
                if (flag) {
                    $('.banner div').each(function (i, ele) {
                        if ($(document).scrollTop() >= $(ele).offset().top) {
                            $('.nav div').eq(i).addClass('current').siblings().removeClass();
                        }
                    })
                }

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .banner div:nth-child(1) {
            width: 100%;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
        }

        .banner div:nth-child(2) {
            width: 100%;
            height: 200px;
            background-color: skyblue;
            text-align: center;
            line-height: 200px;
        }

        .banner div:nth-child(3) {
            width: 100%;
            height: 200px;
            background-color: purple;
            text-align: center;
            line-height: 200px;
        }

        .banner div:nth-child(4) {
            width: 100%;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
        }

        .banner div:nth-child(5) {
            width: 100%;
            height: 200px;
            background-color: rgb(235, 206, 111);
            text-align: center;
            line-height: 200px;
        }

        .nav {
            position: fixed;
            top: 10px;
            left: 10px;
            background-color: #fff;
            width: 70px;
            height: 210px;
            display: none;
        }

        .nav div {
            width: 100%;
            height: 40px;
            border: 1px solid gray;
            line-height: 40px;
            text-align: center;
        }

        .current {
            background-color: red;
        }

        .footer {
            width: 100%;
            height: 500px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="header">header</div>
        <div class="banner1">块1</div>
        <div class="banner2">块2</div>
        <div class="banner3">块3</div>
        <div class="banner4">块4</div>
    </div>
    <div class="footer"></div>
    <div class="nav">
        <div>返回顶部</div>
        <div>块1</div>
        <div>块2</div>
        <div>块3</div>
        <div>块4</div>
    </div>
    <script>
        $(function () {
            var flag = true;//节流阀
            $(window).scroll(function () {
                //1:实现页面滑动显示隐藏导航栏
                if ($(document).scrollTop() > $('.banner1').offset().top) {
                    $('.nav').fadeIn();
                }
                else {
                    $('.nav').fadeOut();
                }
                //3:页面滚动到某个区域，对应的导航栏样式也要发生改变
                if (flag) {
                    $('.banner div').each(function (i, ele) {
                        if ($(document).scrollTop() >= $(ele).offset().top) {
                            $('.nav div').eq(i).addClass('current').siblings().removeClass();
                        }
                    })
                }
            })

            // 2:点击导航栏，可以滚动到相应的内容区域处
            $('.nav div').click(function () {
                if (flag) {
                    flag = false;
                    var dis = $('.banner div').eq($(this).index()).offset().top;
                    $('html,body').stop().animate({
                        scrollTop: dis
                    }, function () {
                        flag = true
                    });
                    // 点击了对应的导航栏也要相应的改变样式
                    $(this).addClass('current').siblings().removeClass();
                }
            })
        })
    </script>
</body>

</html>