属性效果

sticky 的本意是粘糊糊的，但在 css 中的表现更像是吸附。常见的吸顶、吸底（移动端网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合。例如下图中的导航，也可以点链接看实际效果。
3976170851-580332889ff50_fix732.jpg
导航的效果更像是在页面打开的时候是 relative 的，向下滑动的时候 fixed 并且 top：0 为零。
而 sticky 代码仅需要如下：

  1. .sticky {
  2.     position: sticky;
  3.     position: -webkit-sticky;
  4.     top: 0;
  5.     z-index: 1;  //z-index用于设置吸顶块始终处于样式堆叠的上方
  6. }

demo点击预览在这,请用 safari 看，幺蛾子的 chrome 需要开 flag 才能看，兼容性我会在后面提到。

兼容性

放心大胆的在 ios 上用吧。
polyfill
如果是检测浏览器是否支持 sticky 我更建议使用如下代码：

if (CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky")) {
    // 支持 sticky
}
//也可以直接两个一起写，浏览器会选择支持的样式：
.div{
  position: sticky;
  position: -webkit-sticky
}

特性（坑）

1、sticky 不会触发 BFC。如果不知道 BFC 可以看这里。
2、样式表 z－index 无效。行内 style 写有效。
3、sticky 是容器相关的，也就说 sticky 的特性只会在他所处的容器里生效。这个比较抽象，demo 在这里，看完之后就懂了。强调这一点是因为在实际使用中，碰到 body 设置 height：100% 的时候 sticky 元素停在某一个位置不动了。

4、sticky元素根据正常文档流进行定位，然后相对它的最近滚动祖先和最近块级祖先,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
5、粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
由于这个特殊的性质，所以可以轻松的实现吸顶的功能
注意：须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同