CSS 固定網頁 Header 的方式：position: fixed 與 position: sticky 差異解析

更新日期： 2024 年 11 月 1 日

在現代的網頁設計中，固定的導覽欄（Header 或 Menu）可以增強用戶體驗，讓使用者隨時能夠訪問重要的頁面選項。

在 CSS 中，兩種常用的方法來實現固定導覽欄，分別是使用 position: fixed 和 position: sticky。

本篇文章將針對這兩個屬性進行介紹，並比較它們的異同，幫助新手理解何時選擇哪一種方式。

position: fixed 與 position: sticky 基本概念

這兩個屬性，都能讓元素在滾動頁面時，保持「固定」位置，但它們的行為卻有很大不同：

1. position: fixed：這種方式會將元素完全固定在視窗的某個位置，無論頁面怎麼滾動，元素都不會移動。
2. position: sticky：這種方式則是一種「條件固定」。當元素滾動到特定位置時，才會開始固定，並保持在那個位置直到其父元素的邊界限制。

position: fixed 的行為與範例

使用 position: fixed 時，元素相對於視窗（Viewport）固定，而不是頁面的其他元素。

無論用戶滾動到哪個位置，元素都保持在視窗中指定的位置，通常用於固定在頁面頂端或底端的元素。

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

在這個範例中，header 元素會固定在視窗的頂部，隨著用戶滾動頁面不會移動。

常見應用包括頁面的頂部導航欄、側邊欄等。

position: fixed 的優缺點

• 優點：
  • 讓導覽欄始終可見，適合需要長期展示的固定元素。
• 缺點：
  • 占用畫面空間，可能導致內容被遮擋，特別是在移動設備上。
  • 沒有條件性或上下文，只能完全固定。

position: sticky 的行為與範例

position: sticky 可以理解為一種「條件性」的固定，元素會在滾動到特定位置時才開始固定，並且只在其父元素的範圍內有效。

例如，position: sticky 可以在用戶滾動到某個部分時才將導航欄「吸附」在頂部，直到該段落結束。

header {
  position: sticky;
  top: 0;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

在這個例子中，當頁面滾動到 header 元素的高度時，它才會「吸附」到頂部，隨著滾動保持固定，直到父元素的底部。

position: sticky 的優缺點

• 優點：
  • 只在特定位置才固定，讓頁面內容不會過度被遮擋，特別適合長文章或頁面多段內容。
  • 適用於需要在段落內部或特定區塊實現「粘附」效果的場景。
• 缺點：
  • 依賴父元素的高度，父元素若過短，sticky 效果不明顯。
  • 在某些瀏覽器上有兼容性問題，尤其是較舊的瀏覽器。

比較：何時使用 position: fixed 或 position: sticky？

常見的應用場景

1. 全域性固定導航欄：當需要讓導航欄始終顯示時，使用 position: fixed。
   
   例如頁面頂部的固定導覽欄，適合小型網站或單頁應用。
2. 段落內部固定導航：如果頁面包含多段內容，而希望讓當前區塊的導航跟隨用戶滾動到該區段時顯示，可使用 position: sticky。
   
   這種效果經常用於長篇文章，讓用戶能隨時訪問區塊內的功能。

結論

position: fixed 和 position: sticky 都能夠固定導覽欄，但它們各有特定的應用場景。

fixed 適合於需要完全固定的元素，而 sticky 更適合在特定滾動範圍內的「條件固定」。

掌握這兩者的使用差異，可以更靈活地設計出使用者友好的導覽體驗。

希望這篇文章幫助你，理解如何選擇合適的方式來固定導覽欄！