电梯楼层&监听滚动条

欢迎加入qq群(IT-程序猿-技术交流群)：757345416

此功能基于jQuery，请先引入jQuery之后再进行一下代码粘贴，好了，步入正题，上代码：

1、css部分

* {
            margin:0px;
            padding:0px;
            font-family:'微软雅黑';
        }
        .part {
            height:400px;
            border:1px solid #5c7688;
            width:80%;
            float: right;
        }
        .div2{
            background: red;
            height: 600px;
        }
        .div3{
            background: #900;
            height: 800px;
        }
        .div4{
            background: #090;
            height: 1000px;
        }
        .div5{
            background: #009;
            height: 1200px;
        }
        .div6{
            background: #909;
            height: 1400px;
        }

        ul {
            overflow:hidden;
            position:fixed;
            top:300px;
            left: 20px;
        }
        li {
            width:100px;
            height:40px;
            background: #5c7688;
            text-align:center;
            line-height:40px;
            color:#fff;
            font-size:18px;
            cursor:pointer;
            border-bottom:1px solid #fff;
            box-sizing: border-box;
        }
        li.active {
            border: 1px solid #5c7688;
            margin-bottom: 1px;
            background: #fff;
            color: #666;
        }

2、html部分

<div class="wrap">
        <div class="div1 part">生鲜食品</div>
        <div class="div2 part">酒水饮料</div>
        <div class="div3 part">粮油副食</div>
        <div class="div4 part">休闲食品</div>
        <div class="div5 part">美容洗护</div>
        <div class="div6 part">家居用品</div>
    </div>
    <ul class="nav_ul">
        <li class="li1 active">生鲜食品</li>
        <li class="li2">酒水饮料</li>
        <li class="li3">粮油副食</li>
        <li class="li4">休闲食品</li>
        <li class="li5">美容洗护</li>
        <li class="li6">家居用品</li>
    </ul>

3、JavaScript部分

 var divOffsetTopArr = [
    $('.div1').offset().top,
    $('.div2').offset().top,
    $('.div3').offset().top,
    $('.div4').offset().top,
    $('.div5').offset().top,
    $('.div6').offset().top,
    ];
    $(window).scroll(function() {
        for(var i=0; i<$('.wrap .part').length; i++) {
            if($(this).scrollTop() > (divOffsetTopArr[i] - 50)) {  
            $('.nav_ul li').eq(i).addClass('active').siblings().removeClass('active');
        }
    }
});
    $('.nav_ul li').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        $('body, html').animate({scrollTop: divOffsetTopArr[$(this).index()]}, 100);
    });