CSS紀錄 ▎那些年糾纏我的sticky? 失效情形&解法紀錄
更新於 2024/09/28閱讀時間約 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 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
浮動（float）是早期用來創建佈局的技術。元素可以向左或向右浮動，旁邊的元素會環繞浮動元素。浮動元素通常用於圖文混排或簡單的兩欄佈局。
什麼是壓力: 一直上不去的地方
什麼是支撐: 一直下不去的地方
以上，講完了!
好啦，講細一點式這樣
支撐壓力的有效性，大格局的時間圖>小格局的時間圖
日K>小時K>15分K>5分K>1分K
所以找壓力支撐請先從大格局開始找
因為我們是做當沖，所以看到日K就已經很夠了
而通常我會先以
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：
客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。
效能優化：如果你的網站只使用 Boot
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
今天來介紹一下比較常用的4種定位方式
其中讓我最搞混的是relative跟absolute
position: relative
還未定top, bottom, left, right 的屬性時，預設會套用position:static，但如果你去設定了top, bottom, left, ri
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式，藉由使用 flex 來進行排版，並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
起源
黏手機背後的支架，不慎噴了太多快乾（瞬間膠），導致快乾溢流，不注意而黏到手。
行動
先沖熱水，中間暫停一下，上網問問Google大神。繼續沖熱水，覺得燙了就用肥皂在黏住的地方，周圍措一圈。終於，不知過了多久，順利分開。
心情
發現當下：啊，黏住了。
過一會：這個快乾效果好像比較
本篇文章分享了 CSS Battle 的題目 #160 的解法，並講解了對於前端工程師基礎切版的重要性和技術總結。
這篇文章將解析CSS Battle第136題的解法，主要考驗基本CSS置中排版的能力，並提供了作者的解法與技術總結。透過互動學習，讓想要學習或練習基礎切版的朋友可以參與討論。
關於攀樹系統的上方固定點，可以念Top anchor 也可以念 Canopy anchor
Top anchor，常用在溯溪垂降、工業繩索，而Canopy anchor比較會是運用在攀樹上，但原則上兩種說法大家都通。
上方固定點顧名思義就是將固定點設置在上方，這邊介紹的會以在地面就能架設系統的固
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
浮動（float）是早期用來創建佈局的技術。元素可以向左或向右浮動，旁邊的元素會環繞浮動元素。浮動元素通常用於圖文混排或簡單的兩欄佈局。
什麼是壓力: 一直上不去的地方
什麼是支撐: 一直下不去的地方
以上，講完了!
好啦，講細一點式這樣
支撐壓力的有效性，大格局的時間圖>小格局的時間圖
日K>小時K>15分K>5分K>1分K
所以找壓力支撐請先從大格局開始找
因為我們是做當沖，所以看到日K就已經很夠了
而通常我會先以
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：
客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。
效能優化：如果你的網站只使用 Boot
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
今天來介紹一下比較常用的4種定位方式
其中讓我最搞混的是relative跟absolute
position: relative
還未定top, bottom, left, right 的屬性時，預設會套用position:static，但如果你去設定了top, bottom, left, ri
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式，藉由使用 flex 來進行排版，並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
起源
黏手機背後的支架，不慎噴了太多快乾（瞬間膠），導致快乾溢流，不注意而黏到手。
行動
先沖熱水，中間暫停一下，上網問問Google大神。繼續沖熱水，覺得燙了就用肥皂在黏住的地方，周圍措一圈。終於，不知過了多久，順利分開。
心情
發現當下：啊，黏住了。
過一會：這個快乾效果好像比較
本篇文章分享了 CSS Battle 的題目 #160 的解法，並講解了對於前端工程師基礎切版的重要性和技術總結。
這篇文章將解析CSS Battle第136題的解法，主要考驗基本CSS置中排版的能力，並提供了作者的解法與技術總結。透過互動學習，讓想要學習或練習基礎切版的朋友可以參與討論。
關於攀樹系統的上方固定點，可以念Top anchor 也可以念 Canopy anchor
Top anchor，常用在溯溪垂降、工業繩索，而Canopy anchor比較會是運用在攀樹上，但原則上兩種說法大家都通。
上方固定點顧名思義就是將固定點設置在上方，這邊介紹的會以在地面就能架設系統的固