position: sticky 詳解（防坑指南）

caikeal 發布于2019-08-29 11:25 / 2259人閱讀

摘要：寫這篇文章的原因是無論中文還是英文關于的文章，只是說了這個性感的新特性可以拿來用，簡單寫一個完事，并沒有詳細的解析它。屬性效果的本意是粘糊糊的，但在中的表現更像是吸附。強調這一點是因為在實際使用中，碰到設置的時候元素停在某一個位置不動了。

寫這篇文章的原因是無論中文還是英文關于 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
}

特性（坑）

1、sticky 不會觸發 BFC。如果不知道 BFC 可以看這里。

2、樣式表 z－index 無效。行內 style 寫有效。

3、sticky 是容器相關的，也就說 sticky 的特性只會在他所處的容器里生效。這個比較抽象，demo 在這里，看完之后就懂了。強調這一點是因為在實際使用中，碰到 body 設置 height：100% 的時候 sticky 元素停在某一個位置不動了。

inspired by
mdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111641.html

vue-sticky組件詳解

摘要：但當該元素的位置移出設置的視圖范圍時，其定位效果將變成，并根據設置的等作為其定位參數。另外，筆者在網上找過相關的組件。面向人群急于使用組件的同學。若頁面大小發現變化，原顯示的位置可能與頁面變化后的不一致。 sticky簡介 sticky的本意是粘的，粘性的，使用其進行的布局被稱為粘性布局。 sticky是position屬性新推出的值，屬于CSS3的新特性，常用與實現吸附效果。設置...

phodal 2019-08-23 12:13 評論0 收藏0
css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0
前端學習資源

摘要：提供了完整的環境，并且支持自定義域名指向，動態計算資源調整，可以完成各種應用的開發編譯與部署。 react 新特性 react16 Context 算法相關圖解排序算法(二)之希爾排序微信小程序微信小程序組件化的解決方案移動端尺寸基本知識瀏覽器前端必讀：瀏覽器內部工作原理瀏覽器緩存原理解讀瀏覽器加載css和js及dom解析之間的關系瀏覽器緩存 CSS學習移動web開發布局入...

zhisheng 2019-08-20 13:33 評論0 收藏0
CSS基礎篇--使用position:sticky 實現粘性布局

摘要：生效規則須指定或四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。并且和同時設置時，生效的優先級高，和同時設置時，的優先級高。設定為元素的任意父節點的屬性必須是，否則不會生效。簡介前面寫了一篇文章講解了position常用的幾個屬性：《CSS基礎篇-- position屬性講解》一般都知道下面幾個常用的： { position: static; position: r...

ybak 2019-08-30 13:52 評論0 收藏0