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