电梯导航栏的实现

news2025/10/31 22:36:27

点击跳到指定位置类似于电梯导航
在这里插入图片描述

.w {
	width: 1200px;
	margin: 0 auto;
}
.fixedtool {
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -676px;
    width: 66px;
    background-color: #fff;
    display: none;
}

.fixedtool li {
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.fixedtool .current {
    background-color: #c81623;
    color: #fff;
}

 <div class="fixedtool">
        <ul>
            <li class="current">家用电器</li>
            <li>手机通讯</li>
            <li>电脑办公</li>
            <li>精品家具</li>

        </ul>
    </div>

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

$(function(){
var toolTop = $(".recommend").offset().top;
 if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
})

② 点击电梯导航页面可以滚动到相应内容区域
③ 核心算法：因为电梯导航模块和内容区模块一一对应的
④ 当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
⑤ 就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top
⑥ 然后执行动画即可

  // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function() {
        //console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $("body, html").stop().animate({
            scrollTop: current
        });
    })
})

刷新页面时发现电梯导航不见了，是因为只有在页面滚动的时候才加载动画，为了避免这种情况的出现，我们可以封装成一个函数，只要加载完成就调用这个函数，在页面滚动的时候也调用这个函数。

 toggleTool();
    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }

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

  // 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名
$(this).addClass("current").siblings().removeClass();

⑧ 当我们页面滚动到内容区域某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类。
⑨ 触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。
⑩ 需要用到each，遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号
⑪判断的条件：被卷去的头部大于等于内容区域里面每个模块的offset().top
⑫就利用这个索引号找到相应的电梯导航小li添加类

  // 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
            $(".floor .w").each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
                }
            })

当我们点击了小li 此时不需要执行页面滚动事件里面的 li 的背景选择添加 current，可以使用节流阀（互斥锁）来控制
整合所有代码

$(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();
    })
})