CSS紀錄 ▎那些年糾纏我的sticky? 失效情形&解法紀錄

2022/09/29閱讀時間約 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,前端學習中,歡迎交流討論🧸🤭
贊助支持創作者,成為他繼續創作的動力吧!
Amber hh
Amber hh
一個在城市學程式的少女,企圖用程式技術帶自己走遍城市🌻                         Hello, 我是Amber 目前正在學習網頁前端技術HTML、CSS以及JavaScript,這裡會發佈一些我的學習筆記、切版紀錄...等
如果要發表留言,請先登入註冊會員
享受沈浸的閱讀體驗
徜徉在不受干擾的簡約介面,瀏覽數百萬篇原創內容。
領取見面禮
只要設定追蹤作者,即可享有 48小時
Premium 閱讀權限