码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-12-08 14:12:43      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:text   osi   pre   enter   modules   node   ali   lin   fixed   

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;//满足条件后终止循环
                }
            }
        })
    })

 

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

标签:text   osi   pre   enter   modules   node   ali   lin   fixed   

原文地址:http://www.cnblogs.com/huahua0825/p/8004457.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!