CSS紀錄 ▎那些年糾纏我的sticky? 失效情形&解法紀錄
閱讀時間約 3 分鐘
相信大家對於 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，前端學習中，歡迎交流討論🧸🤭
為什麼會看到廣告
22會員
22內容數
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。