jquery电梯导航（重点）

电梯导航案例分析

案例实现代码

$(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 == true) {
            $(".floor .w").each(function(i, ele) {
                // 被卷去的头部 >= 内容区域里面的每个模块的offset().top
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    // 利用索引号找到相应的电梯导航小li 添加类
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current");
                }
            });
        }
    });
    // 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("current");
    });
})