Web前端实现电梯导航（完整版）

最新推荐文章于 2024-01-11 10:13:58 发布

R__Zoro

最新推荐文章于 2024-01-11 10:13:58 发布

阅读量2.4k

点赞数 3

文章标签：前端 javascript es6 html

本文链接：https://blog.csdn.net/R__Zoro/article/details/126873939

版权

什么是电梯导航。当点击导航某个标题时，内容部分会滑到对应的地方。当页面滚动时，滚到某块区域，对应的导航标题会有变化。

案例代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 3000px;
        }

        .aside {
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .item {
            height: 40px;
            line-height: 40px;
            text-align: center;
            padding: 0 10px;
            cursor: pointer;
        }

        .active {
            background-color: red;
            color: #fff;
        }

        .content {
            width: 660px;
            margin: 400px auto;
        }

        .neirong {
            height: 300px;
            margin-bottom: 20px;
            color: #fff;
        }

        .content1 {
            background-color: red;
        }

        .content2 {
            background-color: blue;
        }

        .content3 {
            background-color: orange;
        }

        .content4 {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>

    <div class="aside" style="display: none;">
        <div class="item active">男装/女装</div>
        <div class="item">儿童服装/游乐园</div>
        <div class="item">电子产品</div>
        <div class="item">电影/美食</div>
    </div>

    <div class="content">
        <div class="neirong content1">男装/女装</div>
        <div class="neirong content2">儿童服装/游乐园</div>
        <div class="neirong content3">电子产品</div>
        <div class="neirong content4">电影/美食</div>
    </div>

    <script>
        // 1.获取元素
        let items = document.querySelectorAll('.item');

        // 内容盒子获取
        let neirongs = document.querySelectorAll('.neirong');

        

        

        // 2.左侧aside 模块点击谁，谁高亮
        for(let i = 0;i < items.length;i++){
            items[i].addEventListener('click',function(){
                //找到上一个active类
                document.querySelector('.aside .active').classList.remove('active');
                //点击谁谁添加类
                this.classList.add('active');
                // 3.右侧内容耿穗走动，让页面滚动到对应的offsetTop值
                // console.log(neirongs[i].offsetTop);
                document.documentElement.scrollTop = neirongs[i].offsetTop;
                // neirongs[i].getBoundingClientRect().top = 0;
                // console.log(neirongs[i].getBoundingClientRect().top);
            });

        }

        
       

       

        //滚动页面
        window.addEventListener('scroll',function(e){
            
            // console.log(this.pageYOffset);
            // console.log(neirongs[neirongs.length-1].getBoundingClientRect().top);

             //显示导航栏     getBoundingClientRect().top 元素上边距离页面上边的距离
            if(this.pageYOffset >= neirongs[0].getBoundingClientRect().top && this.pageYOffset >= -neirongs[0].offsetHeight){
                items[0].parentNode.style.display = 'block';
                // console.log(this.pageYOffset);
            }
             //隐藏导航栏
            if(this.pageYOffset < neirongs[0].getBoundingClientRect().top || neirongs[neirongs.length-1].getBoundingClientRect().top <= -neirongs[0].offsetHeight){
                items[0].parentNode.style.display = 'none';
            }
            
            for(let i = 0;i < neirongs.length;i++){
                //页面滚动到相应位置，电梯导航按钮添加active类
                if(neirongs[i].getBoundingClientRect().top < 0 && neirongs[i].getBoundingClientRect().top > -neirongs[0].offsetHeight){
                    document.querySelector('.aside .active').classList.remove('active');

                    items[i].classList.add('active');
                }
            }
            
        })

        // 第二种方法jQuery实现
        // $(window).scroll(function() {
        //         // 获取所有的内容盒子，并进行遍历输出，如果页面卷去高度大于元素距离文档顶部的距离，那么就让右侧导航栏相应的li添加样式。
        //         // 页面滑到相对应的内容区域 导航栏选项添加或删除类
        //         // 通过内容区域索引号 找到导航栏选项的索引
        //         $(".content .neirong").each(function(i, ele) {
        //             if ($(document).scrollTop() >= ($(ele).offset().top)) {
        //                 // 卷去的高度一旦开始超过元素距离文档顶部的距离，说明已经到了位置。
        //                 $(".aside .item").eq(i).addClass("active").siblings().removeClass('active');
        //             }
        //         })
        //     });



        

    </script>
   
</body>

</html>