楼层 跟随 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');
//                }
//            }
//        }
    };