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。代表沒有優質說明文件。但根據這個錯誤,如果同時指定 left
和 right
,則 left
勝出。同樣地,如果同時使用 top
和 bottom
,則 top
會勝出。
目前支援 Chrome 23.0.1247.0 以上版本 (目前 Canary 版) 和 WebKit 每晚皆可使用。