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

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

    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

class="boxWrap">
    
class="floor bg_blue" data-floor="1">1F
    
class="floor bg_pink" data-floor="2">2F
    
class="floor bg_red" data-floor="3">3F
    
class="floor bg_black" data-floor="4">4F
    
class="floor bg_green" data-floor="5">5F

class="fixFloor">
    
class="cf">
        
class="subFloor cf active">
class="floorNum">1F
class="floorExpression bg_blue">商家
        
class="subFloor cf">
class="floorNum">2F
class="floorExpression bg_pink">类目
        
class="subFloor cf">
class="floorNum">3F
class="floorExpression bg_red">热门
        
class="subFloor cf">
class="floorNum">4F
class="floorExpression bg_black">资讯
        
class="subFloor cf">
class="floorNum">5F
class="floorExpression bg_green">服务
    

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