滚动条滚动点亮对应导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <style>
        *{padding: 0;margin: 0;list-style: none;}
        .clearfix:after {
            display: block;
            content: "";
            clear: both;}
        .clearfix { zoom: 1}
        .list-div ul{margin: 0 auto;display: inline-block;}
        .list-ul li{float: left;list-style: none;width: 100px;border: 1px solid #ddd;text-align: center;height: 40px;line-height: 40px;}
        .list-ul li.active{color: #f33;border-color: #f33;}
        .list-div{position:fixed;top:0;left: 0;background: #fff;width: 100%;text-align: center;height: 50px;}

    </style>
</head>
<body>
<div>
    <div class="list-div">
        <ul class="list-ul clearfix">
            <li class="">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div style="margin-top: 50px;">
        <div class="div-item" style="height: 400px;background: aqua;"></div>
        <div class="div-item" style="height: 500px;background: blue"></div>
        <div class="div-item" style="height: 900px;background: blueviolet"></div>
        <div class="div-item" style="height: 500px;background: darkolivegreen"></div>
    </div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
    $(function () {
        PageScroll(".list-ul li",".div-item",28)
    })
    function PageScroll(navclick,maodian,elseHeight){
        //第一个参数 滚动对应导航的集合 默认类名为active
        //第二个参数 滚动模块的集合
        //第三个参数 导航的高度或者你想去除的高度
        $(navclick).on("click",function () {
            var scrollT=$(maodian).eq($(this).index()).offset().top;
            $(window).scrollTop(scrollT-50)
        })
        //滚动事件
        $(window).scroll(function() {
            var con_scroll = $(this).scrollTop();
            $(maodian).each(function(index,domEle){
                var md_index = $(this).offset().top-elseHeight;
                if(con_scroll>md_index-elseHeight){
                    $(navclick).eq(index).addClass("active").siblings().removeClass('active')
                }
            })
        });


    }

</script>
</body>
</html>
滚动条滚动点亮对应导航

猜你喜欢
