變得黏性 — CSS 黏性定位故障排除

作者：Ibadehin Mojeed✏️

您花了幾天甚至幾個月的時間來建立一個時尚的網頁。一開始一切看起來都很棒，但當你開始滾動時……突然間，你的粘性元素——導航菜單、標題或側邊欄號召性用語——要么根本不粘，要么不留在它們應該在的地方。

令人沮喪，對吧？

乍看之下似乎是一個小錯誤，但很快就會變成一個真正令人頭痛的問題，如果不解決，可能會嚴重損害您網站的參與度。

在本指南中，我們將解決這些最常見的黏性定位問題：

• 未指定偏移量
• flex/grid 容器內的黏性元素
• 黏性元素容器的高度
• 祖先有溢出屬性
• 在 body 元素上溢位

然後我們將透過實際範例和技巧介紹如何解決這些黏性定位問題，讓您成為黏性定位專家！在我們解決了常見問題之後，您還可以找到位置屬性和 CSS 黏性位置的概述。

未指定偏移量

第一個也是最簡單的故障排除步驟是確保使用上、右、下或左等屬性指定偏移量：

.sticky-heading {
  position: sticky;
  top: 0; /* Offset not defined - sticky behavior won't activate */
}

如果沒有偏移，黏性行為將不會啟動。此外，請確保應用的偏移適合預期的滾動方向。例如，頂部或底部用於垂直滾動，左側或右側用於水平滾動。

flex/grid 容器內的黏性元素

下面的 CodePen 示範了網格容器內的黏性元素：

查看 CodePen 上 Ibaslogic (@ibaslogic) 的網格容器內的 Pen Sticky 元素。

在 CodePen 中，標題會黏住，因為容納每個標題的容器有足夠的可滾動空間。為了更好地視覺化佈局，請嘗試在內容周圍新增邊框。這將幫助您在滾動瀏覽各個部分時了解每個標題如何保持在適當的位置。

 

在 HTML 程式碼中，標題放置在網格容器內，網格項目自然拉伸以填滿可用空間。然而，這種拉伸會阻止黏性元素有足夠的空間來滾動和黏住。

為了解決這個問題，我們對網格容器應用了align-items:start。這可以防止黏性元素被拉伸，確保它有足夠的空間來按預期發揮作用：

.sticky-heading {
  position: sticky;
  top: 0; /* Offset not defined - sticky behavior won't activate */
}

如果沒有align-items: start，網格容器將拉伸標題以填充可用空間，防止元素黏在視窗的頂部。發生這種情況是因為沒有足夠的可滾動空間來正確附加元素，如下所示：

 

雖然範例顯示了網格的實現，但相同的解決方案也適用於 Flexbox 佈局。

黏性元素容器的高度

當您與下面的CodePen 互動並滾動視口以觀察黏性行為時，您會注意到第一個黏性元素無法按預期工作，而第二個黏性元素可以正常工作- 即使佈局在視覺上看起來相似:

如前所述，為了使黏性元素正常工作，其容器必須有足夠的高度或可滾動空間。讓我們仔細看看容器。在第一個佈局中，黏性元素包含在額外的

中：

article {
  align-items: start;
  /* ... */
}

在下面的 CodePen 中，您可以滾動該部分以觀察黏性標題現在如何貼在該部分本身中。新增了邊框以可視化可滾動區域：

在 body 元素上溢出

在 body 元素上設定溢出通常不會像其他祖先元素那樣破壞黏性定位：

<p>這是因為主體為整個頁面創建了主要滾動上下文，並且在這種情況下，粘性元素仍然相對於視口粘著：</p>

<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVzBJx?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<p>即使創建了滾動機制，它也不會像在較小的容器中那樣幹擾粘性行為 - 除非設置溢出：隱藏，這會消除滾動溢出視口的任何內容的能力。 </p>

<p>現在我們已經介紹了常見的黏性問題，您可以閱讀有關位置屬性和黏性位置的更一般性概述。 </p><h2>
  
  
  職位屬性的簡要概述
</h2>

<p>CSS 位置屬性控制元素在網頁上的定位方式。使用相對、絕對、固定或黏性等值，您可以使用其包含區塊或視窗中的頂部、右側、底部和左側屬性來調整元素的位置。這些值也使元素能夠使用 z-index 進行相對定位。 </p>

<p>但是，請記住，這些偏移屬性（即上、右、下、左）和 z-index 不適用於具有預設靜態定位的元素。 </p>

<p>在解決黏性定位問題時，重新審視黏性值的意義會很有幫助。了解其行為可以更清楚地了解常見問題以及如何有效解決這些問題。 </p>

<h2>
  
  
  CSS 黏性位置
</h2>

<p>當您將position：sticky套用到元素時，它的行為類似於相對定位的元素，透過保持其在文件流程中的位置。然而，它也獲得了變得“粘性”並響應滾動的能力。 </p>

<p>如果您定義了一個偏移量，例如 top: 10px，則當您向下捲動時，該元素將黏在該位置，就像使用position:fixed 一樣。對於水平滾動，您可以使用向左或向右等偏移來實現類似的效果。值得注意的是，黏性行為僅適用於元素的包含區塊內。一旦滾動超過該區塊的邊界，黏性元素就會像任何普通元素一樣滾動消失。 </p>

<p>下面的 CodePen 示範了黏性行為。滾動視窗以查看正在運行的黏性標題：</p>

<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVKrrq?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<p>每個 HTML 標題都使用position:sticky和top:0進行樣式化，確保當您滾動內容時它會粘在視口的頂部。然而，黏性標題仍然局限於各自的部分。一旦某個部分的內容完全滾動過去，其標題就會向上移動，從而使下一個標題保持在原位。這表明黏性元素不會逃離其父容器。 </p>

<h2>
  
  
  結論
</h2>

<p>當黏性元素無法如預期運作時，建立網頁可能會令人沮喪。但是，了解祖先溢出屬性和父容器高度等關鍵因素可以幫助您解決黏性定位問題。 </p>

<p>透過本指南中的範例和提示，您將能夠確保黏性導覽、標題和側邊欄號召性用語順利運作。如果您發現本指南有幫助，請隨時在線分享。如果您有任何問題或貢獻，請在評論部分加入我！ </p><hr>

<h2>
  
  
  您的前端是否佔用了使用者的 CPU？
</h2>

<p>隨著 Web 前端變得越來越複雜，資源貪婪的功能對瀏覽器的要求越來越高。如果您有興趣監控和追蹤生產中所有使用者的客戶端 CPU 使用情況、記憶體使用情況等，請嘗試 LogRocket。 </p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173266096142897.jpg" class="lazy" alt="Getting sticky with it — Troubleshooting CSS sticky positioning"></p>

<p>LogRocket 就像是網路和行動應用程式的 DVR，記錄網路應用程式、行動應用程式或網站中發生的所有情況。您無需猜測問題發生的原因，而是可以匯總並報告關鍵的前端效能指標、重播用戶會話以及應用程式狀態、記錄網路請求並自動顯示所有錯誤。 </p>

<p>現代化偵錯 Web 和行動應用程式的方式 - 開始免費監控。 </p>


          

以上是變得黏性 — CSS 黏性定位故障排除的詳細內容。更多資訊請關注PHP中文網其他相關文章！