四年前，Eric Bidelman 曾撰寫一篇相當精彩的網誌文章，說明 position: sticky 已納入 WebKit，當時 WebKit 是 Chrome (以及 Safari 等許多其他瀏覽器) 的動力來源。一年後，我們從 Chrome 中移除了 position:sticky，這讓許多網頁開發人員感到困惑，因為「目前的實作方式並未以能與現有捲動和合成系統完美整合的方式設計」。
我們一直希望將其納入 Chrome，如錯誤所述：「一旦我們將捲動和合成作業安排妥當，就應返回 position:
sticky，並以能與其他引擎完美整合的方式實作這項功能」。自 2013 年起，我們就開始追蹤中繼標記錯誤的實作情形。
好消息是，自 Chrome 56 版起 (目前為 2016 年 12 月的 Beta 版，2017 年 1 月推出穩定版)，position: sticky 已重新加入 Chrome。
什麼是 position:sticky？
這需要一點時間，所以我很期待這件事。
position:sticky 是 CSS 定位屬性，可讓您將元素固定在可視區域 (也就是將元素錨定在螢幕頂端)，但只有在其父項在可視區域中可見且位於閾值值內時才會如此。如果未固定在可視區域，元素的行為就會像 position: relative 一樣。這是平台中非常實用且簡單的新增功能，可避免您在 onscroll 事件處理常式中使用 JavaScript，只為了將元素鎖定至檢視區頂端。
以下是部落格的顯示方式。這樣一來，當您閱讀我冗長且費時的文章時，我就能讓目前區段的標題保留在畫面頂端：
如要實作這項功能，請指定 position 屬性應在您要停留的元素上設為 sticky。此外，您也可以在需要停留的位置加入偏移量。
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
上一個範例會將 <h3> 元素固定在可視區域頂端 10 個像素處。如要將其直接固定至檢視區頂端，請將 top 屬性設為 top: 0px。
這項功能的支援度相當高。這項功能適用於 Chrome (耶)、Firefox 和 Safari。以下是 position:sticky 的詳細資訊：