简简单单实现电梯导航

$(function(){
          
   
//首先实现到某个位置显示隐藏
$(window).on("scroll", function () {
          
   
       // 假如到lou1的位置显示
       //获取lou1到定的距离并保存到变量lou1中
        var lou1 = $(".lou1").offset().top;
        //到lou1位置的时候显示
        console.log(lou1);
        //如果当前页面被卷去的头部大于等于lou1的值就让电梯导航显示出来，否则隐藏
        if ($(this).scrollTop() >= lou1) {
          
   
            $(".dt").fadeIn();
        } else {
          
   
            $(".dt").fadeOut();
        }
    });
    $(".dt").on("click", "a", function () {
          
   
        // 当点击这个电梯中的某个a时，返回他的索引号
        var index = $(this).index();
        console.log(index);
        // 获取lou里面第index 个孩子的距离顶部距离保存到lous里 孩子必须是有个class一样的
        //给每个孩子添加 “l” 这个class
        var lous = $(".lou .l")
            .eq(index)
            .offset().top;
        console.log("返回的lous距离" + lous);
        // 减一点的距离 因为页面好看（个人项目为了美观）
        lous = lous - 50;
        console.log("返回减后的lous距离" + lous);
        // 利用动画函数实现缓动模式（记得添加stop函数来控制动画序列）
        $("body,html").stop().animate({
          
   
                scrollTop: lous
            },
            1000
        );
    });
});

个人学习记录 20220-2-23 仅用于个人学习用途…