記錄---為什么你寫的 `position: sticky` 不工作？99% 的前端都踩過這個坑
????? 寫在開頭
點贊 + 收藏 === 學會??????
前端世界里有很多看似“直白”的屬性，比如
position: sticky，聽起來像是“粘住某個位置”——只要設置好就能吸附在頁面某個位置上，滾動時一動不動。
結果實際開發中你可能經歷過以下崩潰三連：
- 設置了
position: sticky; top: 0;，元素依然隨頁面滾動； - 控制臺一切正常，CSS 正確無誤，就是不生效；
- 你開始懷疑人生，默默換回了
position: fixed。
別慌，這篇文章帶你一次性弄懂 position: sticky 的底層機制、誤區、實際用法和最佳實踐。看完之后，不再當“被黏住的程序員”。
一、先明確：什么是 sticky？
position: sticky 是一種混合定位機制：
它在元素進入視口之前是相對定位（relative），一旦滾動到臨界值，就切換為固定定位（fixed）的行為。
簡單來說就是：先跟著父元素走，滾到該停的位置就貼住。
常見寫法如下：
.sticky-header {
position: sticky;
top: 0;
background: white;
}
然后希望這個 header 在滾動時“吸頂”，視覺效果如同 position: fixed，但它依然在文檔流中。
二、問題來了：為什么你寫了 sticky，卻沒有“粘性”？
很多人以為是瀏覽器不支持，其實在現代瀏覽器（包括手機端）中早就原生支持了。
問題通常出在這些容易忽視的坑：
坑一：父元素有 overflow: hidden / auto / scroll
這是最常見的元兇。
.parent {
overflow: hidden;
}
.child {
position: sticky;
top: 0;
}
這種結構下，.child 將永遠無法“粘住”。
原因是 sticky 的參考上下文是最近的可滾動祖先，而 overflow: hidden 等屬性會導致容器成為新的“滾動上下文”，sticky 被限制在里面。
解決方法：不要給 sticky 的父級設置 overflow: hidden，或調整結構讓 sticky 出現在沒有滾動限制的區域。
坑二：sticky 的祖先 display: flex 且方向不匹配
你可能看到過這種結構：
<div class="container"> <div class="sidebar">...</div> <div class="content">...</div> </div>
.container {
display: flex;
}
.sidebar {
position: sticky;
top: 0;
}
你希望 sidebar 在垂直方向粘住頂部，但卻發現它根本不“sticky”。
關鍵在于：flex 布局的主軸方向與 sticky 的方向沖突時，會導致 sticky 無法觸發。
解決方法：
- 確保 sticky 的方向（如 top/bottom）是主軸方向；
- 或者避免讓 sticky 元素在橫向
flex容器中直接使用。
坑三：沒有指定 top/left/right/bottom
這是最基本的問題，但常常被忽略。
.sticky {
position: sticky;
}
這段代碼等于什么都沒設置，因為你必須指定粘性的觸發邊界，否則就沒有觸發條件。
最常見的是：
.sticky {
position: sticky;
top: 0; /* 吸附到頂部 */
}
三、冷知識：sticky 也有“活動半徑”
這個知識點比較少人知道：
position: sticky的“吸附”只在它所屬的父元素區域內生效。
什么意思？我們來看一個例子：
<div class="section"> <h2 class="sticky">章節標題</h2> <p>一大段內容</p> </div>
.section {
height: 600px;
overflow: visible;
}
.sticky {
position: sticky;
top: 0;
}
當滾動到 .sticky 即將離開 .section 的底部區域時，它會自動“脫粘”而不再吸附。
這也就是說：
sticky 不是全頁面范圍內固定，而是在其包含塊（父元素）范圍內固定。
這點與 position: fixed 有本質不同。
四、實際場景推薦：sticky 的用武之地
1. 表頭吸頂
表格中的 thead 永遠固定在頂部，是 sticky 的經典場景：
thead {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
冷知識提醒：不要忘了加
background和z-index，否則會被后面的表格內容遮擋。
2. 左側目錄導航
當你在寫文檔頁面、博客系統、掘金專欄時，目錄條跟隨滾動吸附。
.nav {
position: sticky;
top: 20px;
}
提示：設置 top: 20px 可以保持一點視覺上的留白感，避免太貼邊。
3. 分段標題懸浮
像微信公眾號正文那種標題懸浮，每個段落標題隨著滾動在頂部短暫停留，也是 sticky 的天然優勢。
h2 {
position: sticky;
top: 0;
background: white;
}
這種方式比 IntersectionObserver 更簡單、性能更好，兼容也更廣。
五、bonus：sticky + scroll-margin 搭配更美觀
另一個冷知識是，sticky 和 scroll-margin 是一對黃金搭檔。
當你在跳轉錨點時，元素可能會被“貼死”在頂部，體驗很差。
.section-title {
scroll-margin-top: 60px;
}
個屬性的意思是：在瀏覽器滾動到錨點時，距離頂部保留 60px 的空隙，剛好與 sticky 的吸頂位置對齊。
六、你應該避免的錯誤總結
尾聲：粘貼的不只是樣式，更是理解力
CSS 很多“高級”特性并不是寫法復雜，而是對瀏覽器工作方式的理解不夠清晰。position: sticky 看似只是個定位屬性，其實牽涉了滾動上下文、布局流、容器模型、層級控制等多個維度。
當你真正理解 sticky 的“粘性邊界”與“父級限制”之后，你會發現它比 fixed 更靈活，也更優雅。
下一次當你寫 sticky 的時候，不妨回想這篇文章里說的幾條冷知識。讓你的樣式也擁有一點“持久的粘性”。
本文轉載于：https://juejin.cn/post/7507073213865689138
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
浙公網安備 33010602011771號