jQuery 实现电梯导航

电梯导航

- 话不多说，直接放代码

话不多说，直接放代码

html 结构

<!DOCTYPE html>
<html lang="en">

<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery.js"></script>
</head>

<body>
    <!-- 版心 -->
    <div class="w">

        <!-- 头部 -->
        <header>
            header
        </header>

        <!-- 导航栏 -->
        <nav>
            nav
        </nav>

        <!-- 电梯层 -->
        <div class="wrap">
            <div class="wrap_con">
                <div class="con1">con1</div>
                <div class="con2">con2</div>
                <div class="con3">con3</div>
                <div class="con4">con4</div>
                <div class="con5">con5</div>
            </div>
        </div>

        <!-- 底部 -->
        <footer>
            footer
        </footer>

        <!-- 电梯遥控器 -.-     -->
        <div class="slide_nav">
            <span class="active">con1</span>
            <span>con2</span>
            <span>con3</span>
            <span>con4</span>
            <span>con5</span>
        </div>

    </div>

    <script src="./js/index.js"></script>
</body>

</html>

css 样式

* {
    margin: 0;
    padding: 0;
    Box-sizing: border-Box;
}

.w {
    width: 1280px;
    margin: 0 auto;
}

header {
    height: 100px;
    background-color: #30f3f4;
}

nav {
    margin: 20px 0;
    height: 100px;
    background-color: #ff3040;
}

.wrap_con {
    width: 100%;
    height: 100%;
}

.wrap_con>div {
    width: 100%;
    height: 500px;
    margin-bottom: 20px;
    font-size: 30px;
    text-align: center;
    font-weight: 700;
    line-height: 500px;
    color: #fff;
}

.con1 {
    background-color: #333;
}

.con2 {
    background-color: #555;
}

.con3 {
    background-color: #777;
}

.con4 {
    background-color: #999;
}

.con5 {
    background-color: #aaa;
}

footer {
    height: 500px;
    background-color: #3040ff;
}

.slide_nav {
    display: none;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100px;
}

.slide_nav span {
    float: left;
    width: 80%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.active {
    background-color: #ff3040;
    color: #fff;
}

jQuery 代码

$(function() {
    // 3. 定义节流阀，控制一个页面同时只能由一个动画在进行
    let flag = true // true 表示有动画正在进行

    // 1. 当页面滚动到 nav 区域， 让侧边栏显示出来
    $(window).scroll(function() {
        // 1.1 获取 nav 区域离上边的距离
        let top = $('nav').offset().top
            // console.log(top);

        // 1.2 当页面滚动到 nav 区域，显示侧边栏

        // if ($('html,body').scrollTop() >= top) {
        //     $('.slide_nav').show()
        // } else {
        //     $('.slide_nav').hide()
        // }

        // 1.2 三元表达式
        $('html,body').scrollTop() >= top ? $('.slide_nav').show() : $('.slide_nav').hide()

        // 4. 当页面滚动到对应区域的时候，让对应的 span 高亮
        $('.wrap_con>div').each(function(i, item) {

            // 如果有动画正在进行，return
            if (flag == false) return

            // 4.1 首先获取到每个电梯层离页面顶部的距离
            let floorTop = $(item).offset().top

            // 4.2 当页面滚动到对应区域，让对应的 span 高亮
            if ($(window).scrollTop() >= floorTop - 1) { // - 1  是因为浏览器计算式会丢失精度，可能高亮的不准确
                $('.slide_nav span').eq(i).addClass('active').siblings().removeClass('active')
            }
        })
    })

    // 2. 给每个 span 注册点击事件
    $('.slide_nav span').click(function() {
        // console.log(this);

        // 3.1 做动画之前先检查有没有动画在进行
        if (flag == false) {
            // 如果有，直接退出函数
            return false
        }
        // 3.2 并且关闭节流阀
        flag = false

        // 2.1 获取索引号
        let index = $(this).index()

        // 2.2 点击每个span 获取对应的内容区域的高度
        let currentTop = $('.wrap_con>div').eq(index).offset().top
            // console.log(currentTop);

        // 2.3 给整个页面做动画，显示对应的区域
        $('html,body').animate({
            scrollTop: currentTop
        }, function() {
            // 3.3 动画完成之后通过回调函数打开节流阀
            flag = true
        })


        // 2.4 通过添加类名来改变背景色
        $(this).addClass('active').siblings().removeClass('active')
    })
})

注意点：

js 代码不是按照正常顺序来的，是按照思路来的（看的话要按照 1234 的顺序）
要想让一个页面不出现动画排队的问题，搞个节流阀加里头
页面滚动让对应的 span 高亮，肯定要先遍历获取每个电梯层的高度啊，不然怎么知道滚动到哪儿了

jQuery 实现 电梯导航

电梯导航

话不多说，直接放代码

相关推荐

jQuery 实现电梯导航