堅持降落！排名 - 固定式到達 WebKit

position: sticky 是定位元素的新方法，概念上與 position: fixed 類似。差異在於，在可視區內達到特定偏移閾值之前，具有 position: sticky 的元素會在父項中以 position: relative 的行為運作。

用途

以下是 Edward O’Connor 最初提案這項功能時的內容：

推出固定式定位

頁緣固定示範

廣告上線展示模式

只要新增 position: sticky (供應商前置字元)，即可將元素設為 position: relative，直到使用者將項目 (或其父項) 捲動至頂端 15 個像素為止：

.sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 15px;
}

在 top: 15px 時，元素會變成固定。

為了說明這項功能在實際設定中的運作方式，我製作了一個示範，當你捲動畫面時，網誌標題會停留在畫面上。

舊方法：捲動事件

目前，如要達到固定效果，網站會在 JS 中設定 scroll 事件監聽器。我們在 html5rocks 教學課程中也使用這項技巧。在小於 1200 像素的螢幕上，當您捲動畫面一段距離後，目錄側欄就會變成 position: fixed。

以下是 (現已淘汰) 的做法，可讓使用者向下捲動時，標題會固定在可視區域頂端，並在使用者向上捲動時回到原位：

<div class="header"></div>

<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
    window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                    header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
</script>

試試看：http://output.jsbin.com/omanut/2/

這很簡單，但如果您想針對一組 DOM 節點 (例如使用者捲動時網誌的每個 <h1> 標題) 執行這項操作，這個模型很快就會崩潰。

為什麼 JS 不是理想的選擇

一般來說，捲動處理常式並不是個好主意。Folks 通常會執行過多工作，並疑惑為何 UI 會出現卡頓情形。

另外，越來越多瀏覽器會實作硬體加速捲動功能，以提升效能。這麼做的問題是，在 JS 捲動處理常式運作時，瀏覽器可能會改用較慢的 (軟體) 模式。我們現在不再在 GPU 上執行。我們將回到 CPU 上。結果如何呢？使用者在捲動網頁時，會感受到更多卡頓情形。

因此，在 CSS 中宣告這類功能非常合理。

支援

很抱歉，這個項目沒有規格。這個屬性是在 6 月在 www-style 中提出，並在 WebKit 中推出。也就是說，沒有可供參考的說明文件。不過請注意，根據這個錯誤，如果同時指定 left 和 right，系統會優先使用 left。同樣地，如果 top 和 bottom 同時使用，則 top 會勝出。

目前支援的版本為 Chrome 23.0.1247.0 以上版本 (目前的 Canary 版本) 和 WebKit 夜間版本。