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 追蹤
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹，以上內容並非個股分析，還請各位依據自身狀況作出交易決策。歡迎訂閱支持我，獲得相關內容，也祝您的投資之路順遂！
每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ
每月 $99 訂閱方案👉https://re
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹，以上內容並非個股分析，還請各位依據自身狀況作出交易決策。歡迎訂閱支持我，獲得相關內容，也祝您的投資之路順遂！
每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ
每月 $99 訂閱方案👉https://re
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。