CSS保健室｜為什麼position:sticky不起作用？

前言

之前我有介紹過 F2E合作社｜響應式導覽列｜Bootstrap 5網頁框架開發入門 ，裡面就有稍微提到 sticky 屬性，但昨天遇到的修正項目是要把 sidebar 在捲動後固定於右方，雖然當下馬上想到這個解決辦法但怎樣都不會黏貼在頂部，爬文後終於找到罪魁禍首！

（ 圖片來源 ）

與目前使用的瀏覽器不兼容

雖然 position: sticky 現在已經兼容很多瀏覽器了，但也不能保證你目前使用的版本是不是過舊，或還在使用 IE （ 現在真的還有人在使用嗎？ ）。

未設置放置屬性

為了使 sticky 元素正常運行，它需要至少設置一個 top 、 right 、 left 或 bottom 放置屬性。

.sticky-element {
    position: sticky;
    top: 0;
}

父元素具有 overflow 屬性

這就是我這次找到的罪犯！連曾祖父級別的 overflow 竟然也可以讓它罷工，所以不管 overflow: hidden 、 overflow: auto 或 overflow: scroll ，如果要使用 sticky 元素的話，就需要考慮有沒有 overflow 出場的必要。

如何找到父母/祖先有沒有設置 overflow

這段程式碼可以快速找到具有設置 overflow 屬性的父母或祖先。

let parent = document.querySelector('.sticky-element').parentElement;

while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if (hasOverflow !== 'visible') {
        console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}

父元素有沒有 height 屬性

如果沒有使用 overflow 但仍然有問題，那可以檢查父層級上有沒有設置高度，試著把它添加或刪除後看看是否能解決問題。

資料來源

1. position: sticky problem
2. CSS position:sticky Not Working? Try This Fix
3. How to Fix Issues With CSS Position Sticky Not Working?
4. Navbar .sticky-top doesn't work #21919