品优购电梯导航案例

案例分析：

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

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

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

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

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

然后执行动画即可

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

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

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

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

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

就利用这个索引号找到相应的电梯导航小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();
    });
})

品优购电梯导航案例

相关推荐