使用 CSS 建立黏性側邊欄

黏性側邊欄是使用者捲動網頁時保持重要內容可見的好方法。在本文中，我們將探索如何使用 CSS 建立黏性側邊欄，並討論它可能無法按預期工作的一些常見原因。

你將學到什麼

• 如何實現黏性側邊欄
• 可能導致position: Sticky失敗的常見問題

第 1 步：設定 HTML

首先，建立一個包含側邊欄佈局基本結構的 index.html 檔案：

<div class="container">
<br>
    <aside class="sidebar"><br>
        <h2 id="Sidebar">Sidebar</h2>
<br>
        <p>This is a sticky sidebar.</p>
<br>
    </aside><br>
    <main class="content"><br>
        <h1 id="Main-Content">Main Content</h1>
<br>
        <p>Lorem ipsum dolor sit amet...</p>
<br>
        <!-- Add more content to enable scrolling --><br>
    </main><br>
</div><br>

第 2 步：為黏性側邊欄加上 CSS

接下來，建立一個 styles.css 檔案並新增以下樣式：

身體{
字體系列：Arial、無襯線體；
邊距：0；
填充：0；
}

.container {
顯示：flex；
}

.sidebar {
位置：置頂；
頂部：0； /* 側邊欄將停留在頂部 /
高度：100vh； / 視口的全高 */
背景：#f4f4f4；
內邊距：20px；
}

.內容{
內邊距：20px；
彈性：1； /* 取剩餘空間/
高度：200vh； / 使內容夠高以便滾動 */
}

查看黏性小工具範例

第 3 步：測試黏性側邊欄

在網頁瀏覽器中開啟您的index.html 檔案並向下捲動。當主要內容滾動時，您應該會看到側邊欄粘在視口頂部。

---

位置：黏性可能不起作用的常見原因

如果您的黏性側邊欄未如預期運行，請檢查以下一些潛在問題：

• 父級溢位：如果黏性元素的父元素具有overflow:hidden、overflow:auto或overflow:scroll，則黏性行為將不起作用。確保父容器允許溢出。

• 黏性元素的高度：黏性元素必須具有定義的高度。如果其高度未設定或小於視口高度，它可能不會如預期運作。

• 位置不正確：必須為黏性元素設定 top 屬性。沒有它，元素​​將不知道該粘在哪裡。

• 顯示屬性：確保黏性元素未設定為 display: none 或 display: inline，因為這些可能會幹擾其定位。

• 瀏覽器相容性：雖然大多數現代瀏覽器支援位置：黏性，但請確保您使用相容的瀏覽器並檢查是否存在任何特定於瀏覽器的問題。

---

結論

您已成功使用 CSS 建立了黏性側邊欄！透過了解可能阻止 Position: Sticky 工作的常見陷阱，您可以解決出現的任何問題。嘗試不同的版面和樣式，看看黏性定位如何增強您的網頁設計。

以上是使用 CSS 建立黏性側邊欄的詳細內容。更多資訊請關注PHP中文網其他相關文章！