5.12.1　声明式用法

Affix插件在声明式用法上只需要设置两种类型的参数即可。示例如下：

<div data-spy="affix" data-offset="60" >导航内容</div>
<!—或者分开设置offset -- >
<div data-spy="affix" data-offset-top="60" data-offset-bottom="100" >导航内容</div>

第一个参数data-spy="affix"是固定不变的；第二个参数offset有两种方式，一种是直接设置data-offset，表示top和bottom都设置100像素，另一种是data-offset-top，这样的方式则可以分别设置。那offset又是什么作用呢？

data-offset-top表示一个完整的新网页，从顶部向下拖动滚动条（也就是网页向上滚动）这个像素以后，affix元素就不再滚动了（固定不动）；而data-offset-bottom则表示距离最底部还有多少距离（本例60像素）以后，就要开始继续滚动了，以免和底部重叠。

为了更能直观地描述该场景，再来看一下示意图，如图5-22所示。

图5-22中有3个状态，第一张图是Affix随着顶部一起滚动的状态，第二张是Affix固定在页面中间的状态，第三张是底部的bottom快要和Affix重叠在一起的状态（此时Affix就会随着Bottom一起向上滚动）。为了更好地解释，同样一个元素在3个状态下分别叫Top1、Top2、Top3。

1）新页面打开以后，Top1显示，但是Affix1没显示全（底部还留一点），所以这时候开始滚动，在进入第2种状态下，默认Affix元素上的样式为affix-top。

2）在中间状态的时候，Top2已经全部滚动出浏览器界面了，这时候Affix2全部进入了视野，而且下面还留了一点白色间距（通过浏览器高度比较可以看到），而这时候Main2的区域还没有完全滚动上去，所以Bottom2也还没有进入浏览器的视野。整个滚动过程中，Affix元素上的样式为affix。

图5-22　自动定位浮标示意图

3）继续滚动，Main3区域的底部完全进入视野了（此时Main3区域的顶部已经滚动出视野了），但Bottom3还没有进入视野，这时候Affix3和Bottom3还有一点距离，我们称之为“空白间距”。然后，继续滚动，在Bottom3和Affix3的边框重合的一瞬间，Affix3就又可以开始滚动了。此时，Affix元素上的样式为affix-bottom。

通过效果，我们可以看到，offset-top的值是从开始移动top，到affix固定不动，期间所移动的距离，本例中也就是top元素的高度60px。而offset-bottom的值，则比较特殊，本例中，我们设置的是Bottom3的高度100px，但是实际上，在Bottom3开始进入之后，要等Bottom3和Affix3重叠时才开始移动。也就是说，虽然你设置了100px，我可以在100px进入视野时开始检测（但未必移动Affix3），还得看你是否和我重叠了，如果还有一段距离，就继续，一直到快要重叠了，我才会让Affix3开始向上移动。

所以结论是：

❑对于offset-top，想在距离顶部多少的地方固定，那就设置多少（注意内外边距）。

❑对于offset-bottom，需要计算affix即将滚动时，其底部到整个页面的底部之间的距离，也就是bottom3的高度+空白高度（其实一般设置为bottom3的高度也没问题）。

所以，使用该插件，除了需要affix-top和affix-bottom样式以外，还需要精确设置这两个offset值，这样才能达到平滑效果，不然滚动的时候会一卡一卡的。另外还需要注意margin-top、margin-bottom、padding-top以及padding-bottom的值，因为这些值也是占用屏幕空间的，所以也会参与到计算中。