如何操作滚动条时间，实现文档摘要

Posted 2020-10-17 huahua_0825

html:

<div class="mg menu">
        <div>
            <ul>
                <li><a href="#model" class="">vue的学习</a></li>
                <li><a href="#course">node的学习</a></li>
                <li><a href="#introduce">js的学习</a></li>
            </ul>
        </div>
    </div>
    <div class="mg content">
        <div class="module">
            <div class="title" id="model">
                <b>vue的学习</b>
            </div>
            <p>1111111111111111hhhhhhhh</p>
            <p>222222222222222222</p>
            <p>3333333333333333333</p>
            <p>444444444444444444</p>
             <!-- 省略以下代码 -->
        </div>
        <div class="module">
            <div class="title" id="course">
                <b>node的学习</b>
            </div>
            <p>node11111111111111</p>
            <p>node2222222222222222</p>
           <!-- 省略以下代码 -->
        </div>
        <div class="module">
            <div class="title" id="introduce">
                <b>js的学习</b>
            </div>
            <p>js的学习js的学习</p>
            <p>js的学习js的学习</p>
             <!-- 省略以下代码 -->
        </div>
    </div>        

css: 样式随便写一下

.menu{
    width: 200px;
    float: left;
    text-align: center;
    position: fixed;
}
    .menu ul li a{
        width: 190px;
        height: 30px;
        line-height: 30px;
        display: block;
        text-decoration: none;
    }
    .selected{
        background-color: #000;
    }
    .selected a{
        color: #fff;
    }
.content{
    width: 900px;
    float: right;
}

js:

    $(function(){
        $(".menu li").eq(0).addClass(‘selected‘);
        $(".menu li").click(function(){
            // 当前选择的添加样式，同级的删除样式
            $(this).addClass(‘selected‘).siblings(‘li‘).removeClass(‘selected‘);
        });
        var modules = $(".module");//所有的模块
        $(window).scroll(function(){
            var _height = 0; //默认高度
            var _srcTop = $(this).scrollTop();//滚动条与页面的距离
            for(var i = 0; i < modules.length; i++){
                _height += modules[i].offsetHeight;
                if(_srcTop < _height){
                    $(".menu li").eq(i).addClass(‘selected‘).siblings(‘li‘).removeClass(‘selected‘);
                    break;//满足条件后终止循环
                }
            }
        })
    })