position:sticky 已在 Chrome 中恢復

四年前,Eric Bidelman 撰寫了一篇很棒的網誌文章,說明 position: sticky 登上 WebKit 時,當時的技術是提供 Chrome 的引擎 (以及 Safari 等許多其他瀏覽器)。一年後,許多網路開發人員紛紛position:sticky 從 Chrome 中移除,因為「目前的實作方式的設計方式未與現有捲動和合成系統完美整合」。

我們一直希望將這項功能放回 Chrome,正因為這個錯誤說:「一旦完成捲動和合成房屋,我們就要再回到 position: sticky,並以能夠與引擎其他部分完美整合的方式實作這項功能。」我們從 2013 年開始處理導入的中繼錯誤

好消息是,自 Chrome 56 起 (目前是在 2016 年 12 月推出 Beta 版,2017 年 1 月穩定版),position: sticky 現已在 Chrome 中重新上架。

位置:固定式

我們花了一點時間到這裡,為什麼會這麼期待?

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 (yay)、Firefox 和 Safari。以下是關於position:sticky的詳細資訊: