用jQuery实现电梯导航模块

jQuery实现电梯导航模块

功能模块

1. 当页面滚动到电器的模块， 显示电梯导航
2. 点击电梯导航中的 li， 页面滚动到对应的内容区域
3. 为当前点击的 li 添加 current 类
4. 页面内容滚动到第几个区域， 左侧的电梯导航自动高亮对应的 li
5. 为页面滚动设置节流阀(点击 li 时， 不进行第4步判断)

html部分结构

 <ul class="sidebar">
        <li>手机模块li>
        <li>电器模块li>
        <li>产品模块li>
        <li>服装模块li>
        <li>鞋子模块li>
    ul>

    <section class="main">

        <div>手机模块div>
        <div class="model">电器模块div>
        <div>产品模块div>
        <div>服装模块div>
        <div>鞋子模块div>
    section>

css部分

 * {
        margin: 0;
        padding: 0;
        margin: 0 auto;
    }
    
    div {
        width: 600px;
        height: 600px;
        border: 1px solid red;
    }
    
    li {
        list-style: none;
        border: 1px solid #abcdef;
        cursor: pointer;
    }
    
    .sidebar {
        display: none;
        position: fixed;
        left: 0;
        top: 350px;
        width: 66px;
        height: 200px;
    }
    
    .current {
        background-color: red;
    }

jQuery部分

//节流阀开启
 var flag = true
 //页面滚动事件
    $(window).scroll(function() {
            // 当页面滚动到电器模块侧边栏显示
            $(this).scrollTop() >= $('.model').offset().top ? $('.sidebar').show() : $('.sidebar').hide()
                // 遍历div
            $('.main div').each(function(i, item) {
                if (flag == false) {
                    return
                }
                var Top = $(item).offset().top
                    // 滚动的距离大于等于当前盒子离顶部的距离
                if ($(window).scrollTop() >= Top) {
                //显示高亮
                    $('.sidebar li').eq(i).addClass('current').siblings().removeClass('current')
                }
            })
        })
        //点击让li,出现在对应的位置
        //绑定点击事件,获取索引,获取楼层与顶部的距离,给html添加动画
    $('.sidebar li').click(function() {

        // 节流阀关闭了
        flag = false
            // 改变背景颜色
            // 获取当前的索引值
        var index = $(this).index()
            // 获取当前索引位置上的盒子离顶部的距离
        var top = $('div').eq(index).offset().top
            // 给html添加动画
        $('html,body').animate({
            scrollTop: top

        }, function() {
            flag = true
        })
        //点击显示高亮
        $(this).addClass('current').siblings().removeClass('current')


    })