4 mins read ‧ 2022/07/20 普

CSS position sticky 的使用方式

css 的 position: sticky 是什麼？

position: sticky  是 2018 年後才比較被廣泛支援的 CSS 屬性，我也是遇到類似的需求才來了解

簡單講的話就是可以做到下方影片的效果

就是被指定為 position: sticky 的元素

如果距離”具有卷軸的父元素“頂部距離小於你指定的大小，就會”黏”在頂部

以往遇到這種需求，都需要寫 Javascript 來”算”出滾動位置，來調整 css

position:sticky 的使用方式

基本用法

.sticky {
    position: sticky;
    /* 這邊的 top 是相對它外層，⭐有設置 position: relative 的"父元素" */
    top: 0;
}

去 W3Cschool 自己試試看🔗

position:sticky 的瀏覽器支援度

我們可以去 Can I use 去查詢一些 CSS 或 Javascript 對各瀏覽器的支援度

position: sticky 比較推薦的使用方式

基本用法如果遇到不支援的瀏覽器，可能就會產生不預期的效果

因此比較推薦的用法是下面這樣

/* 如果瀏覽器不支援 sticky ，就使用 relative */
.sticky{
    position: relative;
}

/* 如果瀏覽器支援 sticky ，就設定為 sticky */
@supports (position: sticky) {
    .sticky{
        position: sticky;
        top: 0px;
    }
}