品优购电梯导航案例

 

 

案例分析：

1. 当我们滚动到 今日推荐 模块，就让电梯导航显示出来

2. 点击电梯导航页面可以滚动到相应内容区域

3. 核心算法：因为电梯导航模块和内容区模块一一对应的

4. 当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号

5. 就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top

6. 然后执行动画即可

7. 当我们点击电梯导航某个小li， 当前小li 添加current类，兄弟移除类名

8. 当我们页面滚动到内容区域某个模块， 左侧电梯导航，相对应的小li模块，也会添加current类， 兄弟移除current类。

9. 触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。

10. 需要用到each，遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号

11. 判断的条件： 被卷去的头部 大于等于 内容区域里面每个模块的offset().top

12. 就利用这个索引号找到相应的电梯导航小li添加类。

 实现代码：

// 电梯导航
$(function () {
    // 每次点击都会执行滚动动画，滚动又会触发添加current类 此时需要节流阀（互斥锁）控制
    // 节流阀
    var flag = true; //节流阀默认打开
    // 1.显示隐藏电梯导航
    var asideTop = $(".recom").offset().top;
    // 加载页面就调用函数 不用等到滚动屏幕才显示隐藏
    toggleAside();
​
    function toggleAside() {
        // 滚动到相应位置时显示电梯导航栏
        if ($(document).scrollTop() >= asideTop) {
            $(".aside").fadeIn();
        } else {
            $(".aside").fadeOut();
        }
    };
    $(window).scroll(function () {
        toggleAside();
        // 3.页面滚动到某个区域，对应小li添加current类名
        // 节流阀打开时才执行里面代码
        if (flag) {
            // 遍历每个内容元素，获得索引号
            // 滚动到相应内容offset().top位置时，就把对应索引号给小li
            $(".floor .w").each(function (i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    // console.log(i);
                    $(".aside li").eq(i).addClass("current").siblings().removeClass();
                }
            })
        }
    });
    // 2. 点击小li跳转到对应位置
    $(".aside li").on("click", function () {
        flag = false; //每次点击关闭节流阀
        // 获取当前点击的小li索引号 点击第几个小li就跳转到对应第几个元素的offset().top位置
        // console.log($(this).index());
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 只有元素可以做动画 所以用html和body
        $("html,body").stop().animate({
            scrollTop: current
        }, function () {
            // 执行完动画滚动就打开节流阀
            flag = true;
        });
        // 给当前点击的小li添加current类名
        $(this).addClass("current").siblings("li").removeClass();
    });
})