粘性定位sticky的用途

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。 该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为。

以上文字是 MDN官网的解释 (opens new window)

下面我们用例子来看看如何使用sticky

导航的跟随定位效果

不超过一屏，显示在页面最底部，页面超过一屏，一直跟随在最后面

这里注意，得给页面设置高度100%, 而且使用top: 100%;。

使用 bottom: 0;的话，是达不到这样效果的

各位大佬如有更多sticky的用法，欢迎留言交流。