樓層 跟隨 js與jq

// dom 本身填寫
    $(window).scroll(function(){floor_scroll();}); // 滾動 執行
    function floor_scroll(){
        $(".quan").each(function(index, el) { // 遍歷 頁面內容 有幾個樓層 就有幾個塊（class爲quan）
            var Wscroll = $(window).scrollTop(); // 獲取 頁面 初始 滾動距離 jq
//            scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; // 獲取 頁面 初始 滾動距離 js
            if (Wscroll > $(this).offset().top-80 && Wscroll < $(this).next().offset().top-80){ // 判斷 此時的距離在 那個樓層的 範圍以內
                $(".fix").find('a').removeClass("ahover") // 移除 所有樓層的樣式
                $(".fix dd").eq(index).find('a').addClass("ahover")  // 給當前樓層 添加樣式
            }
        });
    }

    $('.fix').on('click', 'dd', function () { // 點擊 對應的樓層按鈕
        if($('.quan').eq($(this).index()-1).offset()){ // 判斷 當前樓層是夠有 offset()（偏移座標）
            floor_click_top = $('.quan').eq($(this).index()-1).offset().top-60 // 有偏移座標 ，就獲取當前的偏移座標
            $('html,body').animate({scrollTop:floor_click_top},500); // 移動到 當前的 偏移座標
        }
        $(this).parents('dl').find('a').removeClass('ahover') // 移除 所有樓層的樣式
        $(this).find('a').addClass('ahover') // 給當前樓層 添加樣式
    })
    $('.fix').on('click', '.zui', function () {  // 給特殊的 一個樓層 選項 添加 單獨的 點擊 滾動到 指定的 偏移座標 （通常不須要）
        $(this).find('a').addClass('ahover')
        $('html,body').animate({scrollTop:$('.quan').eq($('.quan').length-1).offset().top},500);
    })

//js 寫法

// 獲取 對應的 dom 元素  樓層導航的 總盒子 每一個樓層相同的class 獲得 樓層導航的子元素，對應的也就是 有幾個樓層    var navContainer = document.getElementById("nav-container"); // 導航的總盒子    var navBox = document.getElementById("nav-box"); // 導航的父級盒子    var textChild = document.getElementsByClassName("textItem"); // 樓層的父級盒子 或者 單獨相同的class 也能拿到對應數量的 樓層    var navBoxChild = navBox.children;    var num = navContainer.offsetTop;    var a = navContainer.offsetHeight;    window.onscroll = function(){        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;        var about_box = document.getElementById("about_box");        if( scrollTop +a>= about_box.offsetTop){ // 給某個 樓層 添加動畫            $('.about_box').find('img').addClass('bounceInDown animated')            $('.about_box').find('p').addClass('rollIn animated')        }        // 當導航與相應文檔接觸的時候自動切換        // method1        for(var i= 0,len=navBoxChild.length;i<len;i++){            if( scrollTop + a >= textChild[i].offsetTop){                for(var j=0;j<navBoxChild.length;j++){                    navBoxChild[j].className = "";                    if(j==navBoxChild.length-1){                        navBoxChild[j].className = "show";                    }                }                navBoxChild[i].className = "cur";                if(i==navBoxChild.length-1){                    navBoxChild[i].className = "show cur";                }            }        }//        for (var i = 0, len = navBoxChild.length; i < len; i++) {////            console.log(i);//            if ( scrollTop + a >= textChild[i].offsetTop) {//                for (var j = 0; j < navBoxChild.length; j++) {//                    $(navBoxChild[j]).attr('class', '');//                    if (j == navBoxChild.length - 1) {//                        $(navBoxChild[j]).addClass('show');//                    }//                }//                $(navBoxChild[i]).addClass('cur');//                if (i == navBoxChild.length - 1) {//                    $(navBoxChild[i]).addClass('show cur');//                }//            }//        }    };