js 導航欄隨內容滾動

時間 2019-11-09
原文原文鏈接
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            html,body{
                height: 100%;
                width: 100%;
            }
            * {
                padding: 0;
                margin: 0;
            }
            
            .menu_nav {
                position: fixed;
                left:  45%;
            }
            
            .menu_nav li {
                display: inline-block;
            }
            
            .model {
                height: 300px;
                width: 100%;
            }
            
            .active {
                background: red
            }
            .warp{
                height: 100%;
                overflow-y: auto;
            }
        </style>
    </head>

    <body>
        <div class="warp" id="warp">
            <div class="menu_nav">
                <ul id="nav">
                    <li class="active">
                        <a href="#1">1</a>
                    </li>
                    <li>
                        <a href="#2">2</a>
                    </li>
                    <li>
                        <a href="#3">3</a>
                    </li>
                    <li>
                        <a href="#4">4</a>
                    </li>
                    <li>
                        <a href="#5">5</a>
                    </li>
                    <li>
                        <a href="#6">6</a>
                    </li>
                    <li>
                        <a href="#7">7</a>
                    </li>
                </ul>
            </div>
            <div class="menu_con">
                <div class="model">
                    <p>我是1</p>
                </div>
                <div class="model">
                    <p>我是2</p>
                </div>
                <div class="model">
                    <p>我是3</p>
                </div>
                <div class="model">
                    <p>我是4</p>
                </div>
                <div class="model">
                    <p>我是5</p>
                </div>
                <div class="model">
                    <p>我是6</p>
                </div>
                <div class="model">
                    <p>我是7</p>
                </div>
            </div>
        </div>
    </body>
    <script>
        let $warp = document.getElementById('warp');
        let  arrHeight = getHeight();
        $warp.onscroll = function(){
            let $nav = document.getElementById('nav');
            let $LI_list = $nav.childNodes; 
            let len = $LI_list.length;
            let nav = []; //導航元素數組
            for(let i = 0; i < len; i++){
                if ($LI_list[i].tagName === "LI") {
                    nav.push($LI_list[i]);
                }
            }
            // 根據滾動事件 計算當前應該是那個模塊該激活
            let top = this.scrollTop; //表示滾動條滾動的高度
            let index = getIndex(top);
            // 判斷 當前滾動模塊 那個激活
            let len1 = nav.length;
            for(let i = 0; i < len1; i ++){
                let cls = nav[i].className;
                if (cls && i !== index) {
                    nav[i].className = '';
                }
                if (i == index){
                    nav[i].className = 'active';
                }
            }
        }
        // 獲取當前激活模塊的 index
        function getIndex(top){
            for( let i in arrHeight){
                if (top < arrHeight[i]) {
                    return i;
                }
            }
        }
         // 獲取 全部模塊的高度 裝成數組，而後滾動判斷是到那個模塊了
        function getHeight() {
            let $doms = document.getElementsByClassName('model');
            let len = $doms.length;
            let data = [];
            for(let i = 0; i < len; i++){
                let h = $doms[i].clientHeight;
                if (i == 0) { //第一個 有頭部 元素 高度 須要加上 , 最後一個 ，有底部 高度須要加上, 每個模塊之間若是有間距 也須要加上
                    data[i] = h
                }else{
                    data[i] = data[i - 1] + h
                }
            }
            return data;
        }
    </script>

</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。
js 導航欄 隨內容滾動

js 導航欄隨內容滾動
