position: sticky 详解（防坑指南）

写这篇文章的缘由是不管中文仍是英文关于 sticky 的文章，只是说了 sticky 这个性感的 css 新特性能够拿来用，简单写一个 demo 完事，并无详细的解析它。我但愿这篇文章能帮助你们在使用 sticky 的时候更顺手。

属性效果

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

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

而 sticky 代码仅须要以下：

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

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

兼容性

因此放心大胆的在 ios 上用吧。
polyfill

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

if (CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky")) {
    // 支持 sticky
}

特性（坑）

一、sticky 不会触发 BFC。若是不知道 BFC 能够看这里。

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

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

inspired by
mdn