如何做 - 粘性/固定導航欄
瞭解如何使用 CSS 建立“粘性”導航欄。
如何建立粘性導航欄
步驟 1) 新增 HTML
建立導航欄
示例
<div id="navbar">
<a href="#home">主頁</a>
<a href="#news">新聞</a>
<a href="#contact">聯絡</a>
</div>
步驟 2) 新增 CSS
設定導航欄樣式；新增 position:sticky 和 top:0，使導航欄在達到其滾動位置時固定。
示例
/* 樣式導航欄 */
#navbar {
position: sticky;
top: 0;
overflow: hidden;
background-color: #333;
}
/* 導航欄連結 */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
/* 頁面內容 */
.content {
padding: 16px;
}
具有 position: sticky; 的元素根據使用者的滾動位置進行定位。
粘性元素在 relative 和 fixed 之間切換，具體取決於滾動位置。它相對於視口中的給定偏移位置進行定位，直到達到該位置 - 然後它“粘住”在原地（就像 position:fixed）。
注意：對於粘性定位，您必須至少指定 top、right、bottom 或 left 中的一個。
要了解更多關於 CSS 定位的資訊，請閱讀我們的 CSS 定位 教程。
