常见的js效果（一）之固定楼层导航栏

项目中遇到比较多的的文档内容，为了方便查找里面的小内容，一般都会在左侧或者右侧放一个固定楼层的导航栏，今天就来说一下这个固定楼层导航栏的思路以及实现的方法。先来看一下效果：

    

看完效果，相信大家对于这个固定楼层导航栏的意思就略知一二了。确实，我们其实要实现三个功能。

其一：固定导航栏滚动到一定位置出现，否则就消失

其二：当我们滚动页面的时候，滚动到相应的位置时，相应的楼层导航栏的位置也要进行改变

其三：当我们点击楼层导航的时候，窗口能够自动滚动到相应的位置

在说如何实现这个功能之前，我得强调一个知识点，就是$(document).scrollTop()和$(window).scrollTop()的区别。因为很多人觉得文档滚动距顶的高度和窗口滚动距顶的高度相同，那么这两个的用法也一定相同，但是我想说的是，如果没有把这两个用法真正地区分，很容易在项目中混淆思路。

首先，这两个得到的滚动高度是没有区别的；

其次，用来设置是，scrollTop(value),但是只有$(window).scrollTop(100)是有效的，并且这个浏览器的兼容性也更强

最后，另外一个获取$('html,body').scrollTop(),这个里面不能穿参数

然后还要强调一个知识点offset().top,这个是指 元素与document 的上边的距离

接下来说说这个楼层固定导航栏的思路和做法。

先来说一下上面三个功能的思路：

1.对应其一，根据上文描述，其思路就是判断窗口的滚动高度是否大于一定高度，大于就把固定导航栏显示，否则就隐藏

2.对应其二，其思路是窗口滚动触发事件，分别得到窗口滚动的高度，以及每个导航对应内容的高度，依次判断窗口滚动的高度是否大于导航栏对应内容的高度，如果符合条件的话，固定导航栏就滚动到相应的位置。

3.对应其三，其思路是点击导航栏时触发事件，得到导航栏选中对象的index值或者是能够辨别内容的值，然后就对应滚动到对应内容区域的顶部

最后来说一下这个做法，也就是代码是如何实现的，为了简便操作，方便了解思路，我就做了一个比较简单的Demo,以供参考：

<div class="boxWrap">    <div class="floor bg_blue" data-floor="1">1F</div>    <div class="floor bg_pink" data-floor="2">2F</div>    <div class="floor bg_red" data-floor="3">3F</div>    <div class="floor bg_black" data-floor="4">4F</div>    <div class="floor bg_green" data-floor="5">5F</div></div><div class="fixFloor">    <ul class="cf">        <li class="subFloor cf active"><p class="floorNum">1F</p><p class="floorExpression bg_blue">商家</p></li>        <li class="subFloor cf"><p class="floorNum">2F</p><p class="floorExpression bg_pink">类目</p></li>        <li class="subFloor cf"><p class="floorNum">3F</p><p class="floorExpression bg_red">热门</p></li>        <li class="subFloor cf"><p class="floorNum">4F</p><p class="floorExpression bg_black">资讯</p></li>        <li class="subFloor cf"><p class="floorNum">5F</p><p class="floorExpression bg_green">服务</p></li>    </ul></div>

这一段主要是Html的内容，大致的结构就是这样的，下面就是js的实现过程，分别对应上述思路，可以简单了解一下。

<script>    $(".subFloor").on("click",function(){        $(this).addClass('active').siblings().removeClass('active');    });    $(window).scroll(function(){        if($(document).scrollTop()>170){            $(".fixFloor").show();        }        else{            $(".fixFloor").hide();        }        var sTop = $(window).scrollTop() + 400;        var floor1 = $(".floor[data-floor='1']").offset().top;        var floor2 = $(".floor[data-floor='2']").offset().top;        var floor3 = $(".floor[data-floor='3']").offset().top;        var floor4 = $(".floor[data-floor='4']").offset().top;        var floor5 = $(".floor[data-floor='5']").offset().top;        if(sTop > floor1){            $(".subFloor").eq(0).delay(300).addClass("active").siblings("li").removeClass("active");        }        if(sTop > floor2){            $(".subFloor").eq(1).delay(300).addClass("active").siblings("li").removeClass("active");        }        if(sTop > floor3){            $(".subFloor").eq(2).delay(300).addClass("active").siblings("li").removeClass("active");        }        if(sTop > floor4){            $(".subFloor").eq(3).delay(300).addClass("active").siblings("li").removeClass("active");        }        if(sTop > floor5){            $(".subFloor").eq(4).delay(300).addClass("active").siblings("li").removeClass("active");        }    });    $(".subFloor").on("click",function(){        var floor = $(this).index();        $("body").animate({scrollTop:($(".floor").eq(floor).offset().top)},50);    });</script>