jQuery —— 实现电梯导航功能

这几天没有之前学习的时间久，相对的知识输入没有之前多了，那对应的知识的输出量就变少了，但是还是在往前看的，就是速度更慢了。但是，还是在保持着知识的输入的，哈哈哈哈哈哈。今天就写个电梯导航吧。简单来说就是在当前页面中页面自己的跳转，emmmmm，还是先来用文字再解释下吧。

在页面中，一般都会有一个侧边导航栏，点击选项页面会跳转到对应的区域；或者滑动鼠标页面到到一个分类的区域侧边导航栏的选项也会变。

看个淘宝的图就明白了。右边的选项对应左边的区域，点击顶部按钮时页面会跳转到顶部。嗯哼，这就是电梯导航了。

电梯导航案例分析

这个案例就是模仿淘宝的呗，为了区别一下，再加一个电梯导航淡入的效果，页面到达一定位置时电梯导航栏才会显示。

这里做出来的效果：页面到达指定区域导航栏显示、点击导航栏选项页面跳转、滑动鼠标页面跳转、点击顶部按钮页面跳转到顶部。

1. 页面到达指定区域导航栏显示：使用页面滚动事件，到达位置让导航栏显示（淡入的效果，会柔和一点）。这里的指定区域是自己指定的，核心就是判断页面卷去的头部和指定区域距离顶部的距离的大小；
2. 点击导航栏选项页面跳转：注册点击事件，需要得到被点击的选项的索引号，通过索引获得对应模块，判断页面卷去的头部和模块区域距离顶部的距离。核心是使用动画；元素才有动画效果
3. 滑动鼠标页面跳转：页面卷去的头部与模块区域距离顶部距离的判断，相等时右边导航栏选项被选中。核心依然是判断距离；
4. 点击顶部按钮页面跳转到顶部：点击事件，让页面卷去的头部 = 0。

以上实现的效果均是使用的jQuery提供的方法。核心点 —— 页面卷去的头部、元素距离顶部的距离、动画

电梯导航还有一个核心点就是导航栏的选项和页面中显示对应的内容区域是一一对应的，找到导航选项就能找到对应的内容区；找到内容去就能找到对应的导航选项，通过索引对应。

看代码咯

$(function () {
    // 1. 显示隐藏电梯导航
    // 页面卷去的头部 = 今日推荐距离顶部的距离
    // console.log($(document).scrollTop());
    var asideNavTop = $(\".recommend\").offset().top;
    toggleTool();
    // 切换侧边导航的状态
    function toggleTool() {
        if ($(document).scrollTop() >= asideNavTop) {
            console.log(asideNavTop);
            $(\".fixedtool\").fadeIn();
        } else {
            $(\".fixedtool\").fadeOut();
        };
    }

    // 页面滚动事件 
    $(document).scroll(function () {
        // 指定位置显示导航
        toggleTool();
        // 3. 页面滑到相对应的内容区域 导航栏选项li添加或删除类
        // 通过内容区域索引号 找到导航栏选项的索引
        $(\".floor .w\").each(function (i, ele) {
            if ($(document).scrollTop() >= $(ele).offset().top) {
                $(\".fixedtool li\").eq(i).addClass(\"current\").siblings().removeClass();
            }
        })
    });

    // 2. 点击li页面跳转到对应的区域
    $(\".fixedtool li\").on(\"click\", function () {
        // 获取当前被点击的li的索引号
        var index = $(this).index();
        var currentLocation = $(\".floor .w\").eq(index).offset().top;
        // 页面跳转的比较生硬，可以采取动画来做跳转
        // $(\"html,body\").scrollTop(currentLocation);
        // (1)要记住：只有元素才有动画 
        $(\"html,body\").stop().animate({
            scrollTop: currentLocation
        })
        // (2)同时选中的选项添加类
        $(this).addClass(\"current\").siblings().removeClass(\"current\");
    })

    // 4. 点击回到顶部
    $(\".fixedtool .back\").on(\"click\", function () {
        $(\"html,body\").stop().animate({
            scrollTop: 0
        })
    })
})

上面的效果基本上是实现了，但是程序有bug,当我们点击导航选项li时,会有闪烁的背景色变化。原因是只要我们点击li,就会给当前li添加背景色的类其余移除类。解决方法就是在点击li是不需要进行背景色类的切换 —— 设置节流阀

$(function () {
    // 点击li时不需要切换背景色
    var flag = true;

    // 1. 显示隐藏电梯导航
    // 页面卷去的头部 = 今日推荐距离顶部的距离
    // console.log($(document).scrollTop());
    var asideNavTop = $(\".recommend\").offset().top;
    toggleTool();
    // 切换侧边导航的状态
    function toggleTool() {
        if ($(document).scrollTop() >= asideNavTop) {
            console.log(asideNavTop);
            $(\".fixedtool\").fadeIn();
        } else {
            $(\".fixedtool\").fadeOut();
        };
    }

    // 页面滚动事件 $(window).scroll()
    $(window).scroll(function () {
        // 指定位置显示导航
        toggleTool();
        // 3. 页面滑到相对应的内容区域 导航栏选项li添加或删除类
        // 通过内容区域索引号 找到导航栏选项的索引
        // 遍历对象 通过内容区域找到对应的导航选项 
        if (flag) {
            $(\".floor .w\").each(function (i, ele) {
                // 页面卷去的头部 >= 当前内容区域的top值
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    // 当前内容区域对应的导航选项li 添加类 其余的兄弟移除类
                    $(\".fixedtool li\").eq(i).addClass(\"current\").siblings().removeClass(); // 链式编程
                }
            })
        }
    });

    // 2. 点击li页面跳转到对应的区域
    $(\".fixedtool li\").on(\"click\", function () {
        // 点击li时 不需要进行类的切换 关闭节流阀
        flag = false;
        // 获取当前被点击的li的索引号
        var index = $(this).index();
        var currentLocation = $(\".floor .w\").eq(index).offset().top;
        // 页面跳转的比较生硬，可以采取动画来做跳转
        // $(\"html,body\").scrollTop(currentLocation);
        // (1)要记住：只有元素才有动画 
        $(\"html,body\").stop().animate({
            scrollTop: currentLocation
        }, function () {
            flag = true; // 当页面动画效果完成后打开节流阀
        })
        // (2)同时选中的选项添加类
        $(this).addClass(\"current\").siblings().removeClass(\"current\");
    })

    // 4. 点击回到顶部
    $(\".fixedtool .back\").on(\"click\", function () {
        $(\"html,body\").stop().animate({
            scrollTop: 0
        })
    })

    // 此时程序有bug,当我们点击导航选项li时,会有闪烁的背景色变化
    // 原因是只要我们点击li,就会给当前li添加背景色的类其余移除类
    // 解决方法就是在点击li是不需要进行背景色类的切换
    // 设置节流阀
})

emmmmmm，代码并不是我自己写的，是看视频看老师写的，我自己又做了一遍，然后还添加返回顶部的效果。功能需求的思路是需要多学习学习的。

加油！！！！！