新手指南：掌握 CSS position: sticky 屬性

更新日期： 2024 年 9 月 14 日

在網頁設計中，我們經常希望某些元素，在滾動時保持在頁面的特定位置。

這時候 position: sticky 就能派上大用場。

這篇文章將幫助你了解什麼是 position: sticky，它如何工作，以及如何在你的設計中靈活運用它。

什麼是 position: sticky？

position: sticky 是 CSS 中的一個定位屬性，它的行為介於 relative 和 fixed 之間。

當你滾動頁面時，sticky 元素會根據滾動的位置，從相對定位變為固定定位，直到達到某個指定的偏移量（通常是 top、right、bottom 或 left）後，才會固定在頁面上。

簡單來說，sticky 讓一個元素在頁面滾動到特定位置後「黏住」視窗，隨著滾動保持在視窗內。

position: sticky 的基本語法

使用 position: sticky 非常簡單，只需將元素的 position 屬性設為 sticky，並設定一個偏移量。

例如 top、right、bottom 或 left：

.sticky-element {
  position: sticky;
  top: 0; /* 當滾動到距離視窗頂部 0px 時，元素開始「黏住」 */
}

例子：固定標題欄

假設我們有一個頁面，想讓標題欄在用戶滾動時保持固定在頂部：

.header {
  position: sticky;
  top: 0;
  background-color: #4CAF50;
  padding: 10px;
  color: white;
  font-size: 24px;
}

<div class="header">固定的標題欄</div>
<p>這是一些內容...</p>
<p>這是一些內容...</p>
<p>這是一些內容...</p>
<p>這是一些內容...</p>
<p>這是一些內容...</p>

在這個例子中，當用戶滾動頁面時，.header 會保持在視窗頂部，直到它到達頁面上的一個特定位置。

position: sticky 的工作原理

position: sticky 的元素會在兩個狀態之間切換：

1. 相對定位：當元素在滾動視窗內的初始位置時，它與其他元素一樣正常滾動。
2. 固定定位：當元素滾動到指定的偏移位置時，它會「黏住」視窗，成為固定定位，隨著頁面滾動而保持在該位置。

這種效果特別適合應用在如導航欄、標題欄等需要在滾動過程中保持可見的元素上。

例子：垂直導航欄

如果你有一個垂直導航欄，並希望當用戶滾動頁面時，導航欄保持在左側不動，可以這樣做：

.nav {
  position: sticky;
  top: 0;
  background-color: #333;
  color: white;
  padding: 15px;
  width: 200px;
  height: 100vh; /* 高度設為視窗高度 */
}

<div class="nav">導航欄</div>
<div class="content">
  <p>大量內容...</p>
  <p>大量內容...</p>
  <p>大量內容...</p>
</div>

在這個例子中，導航欄會一直保持在視窗左側的頂部位置，隨著頁面滾動而固定。

注意事項

• 父容器的影響：sticky 元素的行為受限於其父容器的大小，當父容器較小或滾動過後 sticky 元素超出父容器時，sticky 效果會失效。
• 瀏覽器支持：position: sticky 在現代瀏覽器中得到了廣泛支持，但對於一些老舊的瀏覽器（如 Internet Explorer），可能不支持這一屬性。在設計時，需考慮到這一點。

結語

position: sticky 是一個強大的工具，它讓你能夠輕鬆實現一些複雜的滾動效果，從而提升用戶體驗。

無論是固定標題欄、導航欄還是其他需要在滾動中保持可見的元素，sticky 都能幫助你實現這些效果。

希望這篇文章能幫助你，更好地理解並使用 position: sticky，讓你的網頁設計更上一層樓！