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