如何創建：滾動時的固定標題

學習如何使用 CSS 和 JavaScript 創建滾動時的固定/粘性標題。

創建滾動時的固定標題

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

設置頁眉的樣式；添加 position: sticky 和 top: 0，以使頁眉在滾動到頂端時保持固定。

.header {
  position: sticky;
  top: 0;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

元素設置為 position: sticky; 后，其位置會根據用戶的滾動位置來確定。

粘性元素會根據滾動位置在相對定位和固定定位之間切換。在視口中達到給定的偏移位置之前，它保持相對定位；達到之后，它就會“粘住”在那個位置（就像 position: fixed 一樣）。

注意：要使粘性定位生效，你必須至少指定 top、right、bottom 或 left 中的一個。