[筆記]CSS sticky header

tofudraft

2018-07-10

CSS, JS, MDN, w3schools, 學習, 筆記

來寫點跟本業有關的好了

昨天看到一個 CSS position 屬性值的用法
感覺簡單多了～

有一種顯示
當頁面往下滑超過一個 header
header 就會黏在瀏覽器顯示區的最上方

可以怎麼做呢？
例如下方範例
(參考w3schools)

See the Pen sticky-header-demo-fixed-position by ChengFu, Lin (@jtofu0806) on CodePen.

概念

斷頁面滾動位移，是否大於 header 距離整個頁面頁首的距離
若是，則將 header 設為position: fixed 與top: 0

CSS

當HTMLElement設為 position: fixed
表示它的位置是對應於整個window也就是瀏覽器可視範圍的
當position: fixed時
top屬性表示距離顯示區的上緣距離
因此要將 header 固定在最上方，只要設定top: 0

JS

if (window.pageYOffset > stickyOffset) {
    // 當頁面向下滾動位移 > header 一開始距離頁首位置
    // 設定 CSS 自訂 sticky 類別樣式
}
else {
    // 否則
    // 對 header 移除 CSS 自訂 sticky 類別樣式
}

這裡透過window物件的pageYOffset屬性可取得頁面下滑的距離
其實，它也相當於scrollY屬性
不過，pageYOffset 對於舊型瀏覽器支援度要好一點
(可以看到MDN上的文件，桌面應用支援度就差在 IE 了…)

position: sticky

現在position多了一種屬性值sticky
可以直接達到相同效果

範例

See the Pen sticky-header-demo-sticky-position by ChengFu, Lin (@jtofu0806) on CodePen.

javascript 程式碼可以拿掉判斷並設定樣式的部分
減少很多步驟

不過
這個屬性值當然並非所有瀏覽器都支援
可參考 Can I Use 網站
基本上 Firefox、Chrome 都可以
另外
網站上下方有註記 Chrome 可以用在 th 但用在 thead 和 tr 沒有效果

好奇就試了一下
真的耶～～
將 CSS 中 thead th 的 position: sticky; top: 0; 加上註解
再將 thead 或 thead tr 的註解拿掉
就可以知道了

See the Pen th-position-sticky-demo by ChengFu, Lin (@jtofu0806) on CodePen.

概念

CSS

JS

position: sticky

參考資料