position: sticky 详解（防坑指南）

写这篇文章的原因是无论中文还是英文关于 sticky 的文章，只是说了 sticky 这个性感的 css 新特性可以拿来用，简单写一个 demo 完事，并没有详细的解析它。我希望这篇文章能帮助大家在使用 sticky 的时候更顺手。

sticky 的本意是粘糊糊的，但在 css 中的表现更像是吸附。常见的吸顶、吸底（移动端网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合。例如下图中的导航，也可以点链接看实际效果。

导航的效果更像是在页面打开的时候是 relative 的，向下滑动的时候 fixed 并且 top：0 为零。

而 sticky 代码仅需要如下：

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

所以放心大胆的在 ios 上用吧。polyfill

如果是检测浏览器是否支持 sticky 我更建议使用如下代码：

1、sticky 不会触发 BFC。如果不知道 BFC 可以看这里。

2、样式表 z－index 无效。行内 style 写有效。

3、sticky 是容器相关的，也就说 sticky 的特性只会在他所处的容器里生效。这个比较抽象，demo点击预览 在这里，看完之后就懂了。强调这一点是因为在实际使用中，碰到 body 设置 height：100% 的时候 sticky 元素停在某一个位置不动了。

inspired bymdn