CSS紀錄 ▎那些年糾纏我的sticky? 失效情形&解法紀錄
相信大家對於 sticky 這個效果不陌生，網頁上方的導覽列、文章側邊的相關閱讀等，諸多網頁都能看見它的身影，不過這篇不是 sticky 的使用教學，而是我自己的踩雷紀錄😅💣
主要是整理了過去三個月練習切版時，使用了 position-sticky 語法，卻無法生效的情況，以及最後的解法，其實都只是一些小細節，但因為很常會忘記，所以決定把它紀錄下來，以後可以少踩點雷～
來看看會讓 sticky 失效的情形有哪些吧：
1. 父層容器有下 overflow
這是 MDN 文件裡已經有寫到的，使用 sticky 時，父層容器如果有使用 overflow 的 hidden, scroll, auto, 或 overlay 等屬性值，都會阻礙 sticky 效果，這個比較好檢查出來，就不多寫了。
2. 父層容器的高度沒有大於要黏住的物件
關於這一點，在導覽列用 sticky 時，因為都有設 logo 的高度，父層又通常是 body，所以不太會有問題，但套用在文章側邊欄位時，就會出現錯誤啦！
用一個簡單的範例加上背景色，會比較容易理解：
範例說明：• 外層容器 container 是黃色背景• 左邊 article 為綠色，是內文區塊• 右邊 aside 為紅色，是要黏住固定的區塊 我自己卡住想不通的點在於，一直認為 article 把高度撐起來後，container 的高度就會大於 aside 的高度，完全忘記 article 和 aside 兩個都是「區塊元素」，所以當它們用 display:flex 並排時，高度會是一致的！（切版切到腦袋打結😂）
解開糾結點之後就會發現，當 container 被 article撐滿，而 aside 又沒有設置固定高度的情況下，就是「父層容器的高度沒有大於要黏住的物件」的情況，sticky的效果當然不會出來...。
這時我的解法是給 aside 區塊加上固定 px 的高度，或是 height:100%，讓 aside 不要被隔壁 article 給拉走，就可以順利黏住了！
3. bootstrap 中的 sticky-top
發生失效的情況是，在開發環境編譯時，單純使用 sticky-top 是能夠正常執行的，推到 repo 卻無法運行(?)
查找了 bootstrap 文件才發現，雖然 sticky-top 已經有包含 position:sticky 這個屬性值，但並非所有瀏覽器都支援！
所以解決的寫法可以有兩種
- 在要黏住的區塊上，除了寫上 sticky-top 之外，也把 position-sticky 這個 class 補上
- 不使用 sticky-top 這個 class，而是使用最原本的做法： position-sticky + top-0，不過就無法使用 sticky-top 的響應式變化囉
本來想只用 sticky-top 一個 class 搞定的，誰知道花了更多時間找問題，果然 coding 還是不能偷懶的~😵
🚧以上是我的踩雷紀錄，希望可以幫助正在學習的人，節省一些除錯的時間囉！
我是Amber，前端學習中，歡迎交流討論🧸🤭
分享至
成為作者繼續創作的動力吧！
© 2024 vocus All rights reserved.