前言
之前我有介紹過 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 但仍然有問題，那可以檢查父層級上有沒有設置高度，試著把它添加或刪除後看看是否能解決問題。
