Javascript样例之文档章节滚动全版（DOM）

aaarticlea/png;base64,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" alt="" />

思路：

思路：

1、获取top高度并判断，如果滑动大于的话就让章节浮动

2、获取当前文档章节底部到body顶部的距离{
     1.top的高度
     2.章节到父级div的高度
     3.文档自身的高度
     4.相加的和就是文档底部到body的距离
}

3、获取滑动的高度{
    如果大于0 并且 小于当前总高度
        让当前章节。。。。
    否则就移除条件。。
}
4、 判断最后一章

思路

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            background-color: #dddddd;
        }
        .w{
            margin: 0 auto;
            width: 980px;
        }
        .pg-header{
            background-color: black;
            color: white;
            height: 48px;
        }
        .pg-body .menu{
            position: absolute;
            left: 200px;
            width: 180px;
            background-color: white;
            float: left;
        }
        .pg-body .menu .active{
            background-color: #425a66;
            color: white;

        }
        .pg-body .fixed{
            position: fixed;
            top: 10px;
        }
        .pg-body .content{
            position: absolute;
            left: 385px;
            right: 200px;
            background-color: white;
            float: left;
        }
        .pg-body .content .item{
            height: 900px;
        }
    </style>
</head>
    <body onscroll="Hua();">
        <div class="pg-header">
            <div class="w">

            </div>
        </div>
        <div class="pg-body">
            <div id="menu" class="menu">
                <ul>
                    <li>第一章</li>
                    <li>第二章</li>
                    <li>第三章</li>
                </ul>
            </div>
            <div id="content" class="content">
                <div class="item">床前明月管</div>
                <div class="item">疑是地上霜</div>
                <div class="item" style="height: 100px;">我是郭德纲</div>
            </div>
        </div>
        <script>
                function Hua(){
                    var a = document.body.offsetHeight;
                    var b = document.getElementById('content').offsetHeight;
                    var c = document.documentElement.clientHeight;//当前可视高度

                    var huaGao = document.body.scrollTop;//当前从body滑动的高度
                    console.log(a, b, huaGao, c)
                    var caiDan = document.getElementById('menu');
                    if(huaGao>48){
                        caiDan.classList.add('fixed');
                    }else{
                        caiDan.classList.remove('fixed');
                    }

                    var items = document.getElementById('content').children;//获取【子div】
                    for (var i=0;i<items.length;i++){//一章对应一个div一个内容
                        var currentItem = items[i];//得到每个div内容
                                                  //当前标签距离body的高度
                        var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;////当前标签距离父级div的高度+父级div距离body的高度
                        var currentItemWindowTop = currentItemBodyTop - huaGao;//得到剩下的高度
//                        console.log(currentItemWindowTop);
                        var currentHeight = currentItem.offsetHeight;//可视范围的自身高度？为什么不是scrollHeight
                        var bottomHeight = currentItemBodyTop+currentHeight;//获取当前文档底部到body的总高度

                        if((a+b)==(huaGao+c)){
                            var mu = document.getElementById('menu').children[0].lastElementChild;
                            var lis = document.getElementById('menu').getElementsByTagName('li');
                            for (var m=0;m<lis.length;m++) {
                                var current_list = lis[m];
                                if(current_list.getAttribute('class')=='active'){
                                    current_list.classList.remove('active');
                                    break;
                                }
                            }
                            mu.classList.add('active');
                            return
                        }

                        if (currentItemWindowTop<0 && huaGao < bottomHeight){
                            var ziJi = caiDan.getElementsByTagName('li')[i];//得到第一章
                            console.log(ziJi)//<li class=​"active">​第二章​</li>​
                            ziJi.className = 'active';
                            var lis = caiDan.getElementsByTagName('li');
                            console.log(lis)//[li.active, li, li]
                            for(var j=0;j<lis.length;j++){
                                if(ziJi == lis[j]){

                                }else{
                                    lis[j].classList.remove('active')
                                }
                            }
                            break;
    //                        caiDan.getElementsBytagName('li')[i].className = 'active';
                        }

                    }
                }
        </script>
    </body>
</html>

代码