jquery案例16——电梯导航

耶啵奶膘

已于 2022-06-24 16:18:14 修改

阅读量1.6k

点赞数 2

分类专栏： jquery 文章标签：前端 jquery

于 2022-06-10 15:07:54 首次发布

本文链接：https://blog.csdn.net/xulihua_75/article/details/125221617

版权

jquery 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

一、案例说明

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

二、案例演示

请添加图片描述

三、案例代码

分析：
1.页面滚动监听: 当页面滚动时，获取所有的内容盒子，并进行遍历输出，如果页面卷去高度大于元素距离文档顶部的距离，那么就让右侧导航栏相应的li添加样式。
2.导航栏的li和内容模块个数是对应关系。当我点击导航栏的li时，会获取当前点击的li的索引值，拿着这个索引值去寻找内容的对应模块，使用动画让高度为0。
3.返回顶部：点击按钮，使用动画让元素顶部已滚动的距离为0。

代码如下：

<!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" />
    <script src="./js/jQuery.min.js"></script>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <title>jq实现基础的电梯导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
            background-color: #fff;
        }
        
        body {
            height: 3000px;
            background-color: #f1f1f1;
        }
        
        .aside {
            position: fixed;
            right: 1%;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .aside li {
            height: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
            padding: 0 20px;
        }
        
        .aside li:hover {
            background-color: green;
            color: #fff;
        }
        
        .aside a {
            display: block;
            background-color: #fff;
            text-align: center;
            cursor: pointer;
            padding: 10px 20px;
            text-decoration: none;
            color: #000;
        }
        
        .aside a:hover {
            background-color: green;
            color: #fff;
        }
        
        .active {
            color: green;
        }
        
        .content {
            width: 60%;
            margin: 0 auto;
        }
        
        .box {
            height: 380px;
            margin-top: 20px;
            background-color: #68945c;
        }
        
        .box:first-child {
            margin-top: 0;
        }
    </style>
</head>

<body>
    <!-- 左侧导航strat -->
    <div class="aside">
        <ul>
            <li class="active">动漫</li>
            <li>电视剧</li>
            <li>电影</li>
            <li>歌曲</li>
        </ul>
        <a href="#" class="back">
            <!-- 此处的小图标使用的是bootstrap框架里面的字体图标 -->
            <span class="glyphicon glyphicon-menu-up"></span>
            <br />顶部
        </a>
    </div>
    <!-- 左侧导航end -->
    <!--中间内容strat -->
    <div class="content">
        <div class="box">动漫</div>
        <div class="box tv">电视剧</div>
        <div class="box">电影</div>
        <div class="box">歌曲</div>
    </div>
    <!--中间内容end -->
    <script>
        $(function() {
            //1.页面滚动监听
            $(window).scroll(function() {
                // 获取所有的内容盒子，并进行遍历输出，如果页面卷去高度大于元素距离文档顶部的距离，那么就让右侧导航栏相应的li添加样式。
                // 页面滑到相对应的内容区域 导航栏选项添加或删除类
                // 通过内容区域索引号 找到导航栏选项的索引
                $(".content .box").each(function(i, ele) {
                    if ($(document).scrollTop() >= ($(ele).offset().top)) {
                        // 卷去的高度一旦开始超过元素距离文档顶部的距离，说明已经到了位置。
                        $(".aside li").eq(i).addClass("active").siblings().removeClass('active');
                    }
                })
            });
            // 2.点击导航栏，内容跳转到相应模块。
            $('.aside li').on('click', function() {
                // 获取当前被点击的li的索引号
                var index = $(this).index();
                var box = $(".content .box").eq(index).offset().top;
                // 动画里面有三个参数：距离上方为0，滚动完成时间，完成后的函数。
                $('html,body').stop().animate({
                    scrollTop: box
                }, 500, function() {
                    $(".aside li").eq(index).addClass("active").siblings().removeClass("active");
                });
            });
            // 3.返回顶部
            $(".back").on("click", function() {
                $("html,body").stop().animate({
                    scrollTop: 0
                }, 500)
            });
        });
    </script>
</body>

</html>

四、总结

别忘记引入jq文件
由于我使用了bootstrap框架里面的字体图标，别忘记引入bootstrap.css文件

五、品优购电梯导航的代码

<!-- 固定电梯导航 -->
    <div class="fixedtool">
        <ul>
            <li class="current">家用电器</li>
            <li>手机通讯</li>
            <li>电脑办公</li>
            <li>精品家具</li>

        </ul>
    </div>

<script>
$(function() {
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
    // 节流阀  互斥锁 
    var flag = true;
    // 1.显示隐藏电梯导航
    var toolTop = $(".recommend").offset().top;
    toggleTool();
    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }
    
    $(window).scroll(function() {
        toggleTool();
        // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
        if (flag) {
            $(".floor .w").each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();

                }
            })
        }
    });
    // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function() {
        flag = false;
        console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            flag = true;
        });
        // 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名
        $(this).addClass("current").siblings().removeClass();
    })
})
</script>