操作指南 - 滾動標題
學習如何使用 CSS 建立滾動時固定/粘性標題。
如何建立滾動時固定的標題
步驟 1) 新增 HTML
示例
<div class="header" id="myHeader">
<h2>我的標題</h2>
</div>
步驟 2) 新增 CSS
樣式化標題；新增 position:sticky 和 top:0 使標題在達到其滾動位置時固定。
示例
.header {
position: sticky;
top: 0;
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
自己動手試一試 »
具有 position: sticky; 的元素根據使用者的滾動位置進行定位。
粘性元素在 relative 和 fixed 之間切換，具體取決於滾動位置。它相對於視口中的給定偏移位置進行定位，直到達到該位置 - 然後它“粘住”在原地（就像 position:fixed）。
注意：對於粘性定位，您必須至少指定 top、right、bottom 或 left 中的一個。
要了解更多關於 CSS 定位的資訊，請閱讀我們的 CSS 定位 教程。
