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

思路：

思路：


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>
代码

 

posted @ 2016-07-12 15:05  我当道士那儿些年  阅读(214)  评论(0)  编辑  收藏  举报