sticky组件，通常应用于导航条或者工具栏，当网页在某一区域滚动的时候，将导航条或工具栏这类元素固定在页面顶部或底部，方便用户快速进行这类元素提供的操作。本文介绍这种组件的实现思路，并提供一个同时支持将sticky元素固定在顶部或底部的具体实现，由于这种组件在网站中非常常见，所以有必要掌握它的实现方式，以便在有需要的时候基于它的思路写出功能更多的组件出来。

固定在顶部的demo效果（对应sticky-top.html）：

固定在底部的demo效果（对应sticky-bottom.html）：

1. 实现思路

实现这个组件的关键在于找到元素何时被固定以及何时被取消固定的临界点，要找到这个临界点，首先要详细看看前面demo的变化过程。在前面的demo中，有一个导航条元素，也就是我们要控制固定与否的元素，我把它称为sticky元素；还有一个元素，它用来显示网页的一块列表内容，这个列表元素跟sticky元素在功能上是相关的，因为sticky元素要导航的正是这个列表元素提供的内容，本文在开始介绍sticky组件的功能时，就说过sticky组件固定是发生在网页滚动至某一区域的时候，离开这一区域就会取消固定，这个滚动区域或者说滚动范围，就是由列表元素来决定的，所以这个列表元素是找到临界点的关键，它表示sticky组件可被固定的网页滚动范围，为了后面引用方便，我把这个元素称为target元素。下面就来详细了解下前面demo的变化过程，由于固定在底部的情况与固定在顶部的情况实现思路是相通的，如果弄明白了固定在顶部的实现原理，相信你也一定能弄明白固定在底部的实现原理，所以这里也是为了减少篇幅，提高效率，仅仅介绍固定在顶部的情况：

一开始sticky元素和target元素的状态是这样的：

当滚动条慢慢向下，使得网页向上滚动的时候，sticky元素和target元素在一段滚动距离内状态并没有发生变化，一直到这个状态（滚动条滚动距离为573px）：

在这个状态只要滚动条再往下滚动1px，sticky元素就会被固定在顶部（滚动条滚动距离为574px）：

也就是说当target元素的顶部离浏览器顶部的距离小于0的时候（target元素的顶部未超出浏览器顶部的时候，距离看作大于0），sticky元素就会被固定，所以这就是我们要找的第一个临界点。然后滚动条继续向下滚动，只要target元素还在浏览器可视区域内，sticky元素就会一直被固定：

直到这个状态（滚动条滚动距离为1861px）：

在这个状态只要滚动条再往下滚动1px，sticky元素就会取消固定在顶部（滚动条滚动距离为1862px）：

显然，这就是我们要找的第2个临界点，不过它的判断条件是：当target元素的底部离浏览器顶部的距离小于sticky元素的高度时，sticky元素就会被取消固定。这里为什么是小于sticky元素的高度，而不是小于0，原因是因为基于小于0这个临界点开发出来的组件，会出现target元素几乎快从浏览器可视区域消失了，但是sticky元素还固定在那的效果：

sticky还把footer的内容给盖住了，本来是为了方便用户操作，结果影响了用户操作，所以得把取消固定这个临界点提前，而用sticky元素的高度最合适。

通过前面对demo变化过程的拆解，我们已经得到了滚动条一直向下滚动时，sticky状态变化的两个临界点：

1）当target元素的顶部离浏览器顶部的距离小于0的时候，sticky元素就会被固定；

2）当target元素的底部离浏览器顶部的距离小于sticky元素的高度时，sticky元素就会被取消固定。

综合这两个临界点，可以得出滚动条向下滚动时，sticky元素被固定的滚动范围的判断条件是：target元素的顶部离浏览器顶部的距离小于0 并且 target元素的底部离浏览器顶部的距离大于sticky元素的高度。而且这个判断条件，同样适用于滚动条向上滚动的情况，因为滚动条一直向上滚动时，sticky状态变化的临界点是：

1）当target元素的底部离浏览器顶部的距离大于sticky元素的高度时，sticky元素就会被固定；

2）当target元素的顶部离浏览器顶部的距离大于0的时候，sticky元素就会被取消固定。

（这两个临界点，其实跟滚动条向下滚动时提到的两个临界点，是一个意思，只不过是正话反着说而已）

所以只要得到【target元素的顶部离浏览器顶部的距离】，【target元素的底部离浏览器顶部的距离】，【sticky元素的高度】这三个值基本上就能实现这个组件了。这三个值中sticky元素的高度由设计图决定，它从网页一开始制作就是已知的，在定义组件的时候我们可以从外部传进去，虽然也能从js去获取它的高度，不过显然没有必要增加额外的计算；另外两个值【target元素的顶部离浏览器顶部的距离】，【target元素的底部离浏览器顶部的距离】，我们正好可以利用DOM提供的一个方法来获取，这个方法是：getBoundingClientRect，这是一个兼容性很好的方法，它的调用方式是：

返回一个ClientRect对象，这个对象存储元素框模型的一些信息，比如它的宽高度(width and height)，以及元素框上下边距离浏览器顶部边缘的距离(top and bottom)，左右边距离浏览器左边缘的距离(left and right)：

top跟bottom恰恰就是我们要获取的【target元素的顶部离浏览器顶部的距离】，【target元素的底部离浏览器顶部的距离】，而且当框的顶部或底部未超出浏览器顶部的时候，top跟bottom都是大于0的值，而当框的顶部或底部超出浏览器顶部的时候，top跟bottom是小于0的值：

当我们找到了【target元素的顶部离浏览器顶部的距离】，【target元素的底部离浏览器顶部的距离】，【sticky元素的高度】这三个值，就可以用代码来描述前面的判断条件：

（rect表示target元素调用getBoundingClientRect返回的对象，stickyHeight表示sticky元素的高度）

最后为了让实现思路更加完整，虽然不详细介绍固定在底部的情况的变化过程，我还是把这种情况的临界点跟判断方式补充进来，它的临界点是（这里列的是滚动条向下滚动时的临界点）：

1）当target元素的顶部离浏览器顶部的距离 + sticky元素的高度 小于浏览器可视区域的高度时，sticky元素被固定；

2）当target元素的底部离浏览器的顶部的距离小于浏览器可视区域的高度时，sticky元素被取消固定。

浏览器可视区域的高度，可用document.documentElement.clientHeight来获取，这个属性也是没有兼容性问题的，判断代码为：

2. 实现细节

1）html结构

固定在顶部的html结构：