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

Eric Bidelman

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 不理想

一般來說,捲動處理常式並非最好的方式。錯誤往往要花費太多心力,所以會想知道 UI 卡頓的原因。

另外要注意的是,越來越多瀏覽器實作硬體加速捲動功能以提升效能。問題是,JS 捲動處理常式正在播放中,瀏覽器可能會恢復速度較慢 (軟體) 模式。現在我們已停止在 GPU 上執行。而我們改用 CPU 了。進而使用者在捲動頁面時可能會覺得資源浪費。

因此,在 CSS 中將這類功能加入宣告式做法很合理。

支援

很抱歉,我們無法提供此規格的規格。這份提案已在 6 月透過 www 樣式提出,並剛剛降落到 WebKit。代表沒有優質說明文件。但根據這個錯誤,如果同時指定 leftright,則 left 勝出。同樣地,如果同時使用 topbottom,則 top 會勝出。

目前支援 Chrome 23.0.1247.0 以上版本 (目前 Canary 版) 和 WebKit 每晚皆可使用。