如何使用 CSS 建立黏性標題
在網頁設計中，黏性標題是增強使用者體驗和導航的強大工具。當使用者向下捲動網頁時，黏性標題仍然可見，確保始終可以存取基本的導航連結。讓我們深入研究使用 CSS 建立黏性標題的複雜性。
黏性標題有什麼用?
保持固定在網頁上特定位置的持久標頭稱為「黏性標頭」。若要建立此類功能，需要特定的 CSS 屬性，例如值為「stick」的「position」屬性
用戶能夠輕鬆地瀏覽主要導航鏈接，而不必滾動回頁面頂部，從而在我們的網站體驗中為他們提供無縫、便捷的導航。
標誌和品牌名稱突出顯示，從而保留了品牌的獨特特徵。
一種具有視覺吸引力和功能性的設計選擇是合併一個黏性標題，消除對過多側邊欄導航的需要，從而為網頁上的相關內容顯示創建額外的區域。
設計標題:HTML 結構
有效的黏性標頭的基石在於其 HTML 架構。若要建立黏性標頭的基本元件，請依照下列步驟建立必要的 HTML 元素。
<body>
<header>
<span class="logo">Company Logo ðŸ </span>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="home"><h1>Home page</h1></main>
<section id="about"><h1>About</h1></section>
<section id="services"><h1>Services</h1></section>
<section id="contact"><h1>Contact</h1></section>
</body>
目前的設計採用了一個標題組件，其中包含該公司的徽標以及具有有序超連結清單的導航元素。隨後，它利用主外殼和多個分段外殼來說明內容區域內的每個分區。目前網頁顯示如下:
使用 CSS 奠定基礎
CSS 利用各種盒子模型屬性（例如 padding、margin 和 flexbox）來製作具有視覺吸引力的佈局，其中各個部分被分配統一的高度。
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body { font-family: "Quicksand", sans-serif; }
main,
section { height: 100vh; }
.logo { font-size: 3rem; }
main,
header,
section {
display: flex;
align-items: center;
}
main { justify-content: center; }
header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb;
}
nav ul {
display: flex;
column-gap: 2rem;
list-style: none;
}
a {
text-decoration: none;
font-size: 2rem;
color: #333;
}
section { justify-content: center; }
#home { background: #2c3e50; }
#about { background: #ccccff; }
#services { background: #f5b7b1; }
#contact { background: #40e0d0; }
h1 {
font-size: 4rem;
color: #fff;
}
該頁面現在應如下所示:
實現黏性效果:CSS
若要修正向下捲動頁面時標題移出螢幕的問題，請利用 CSS position 屬性並將標題配置為「黏性」元素。
這種特殊的屬性表現出讓人聯想到相對於使用者的滾動姿態的相對定位和固定定位的特徵。
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}
將標題設為相對於視窗具有固定位置是確保使用者在網頁內容中導航時其可見性和可訪問性的一種方法。透過以像素或百分比單位指定 top 屬性的值，開發人員可以精確控制標題在螢幕可見部分中的顯示位置。當使用者向下捲動頁面時，標題保持靜止，為導航以及與網站上其他元素的互動提供一致的視覺提示。
您的瀏覽器不支援影片標籤。
解決潛在的堆疊問題
為了防止黏性標題被頁面上的其他元素遮擋，建議使用 CSS z-index 屬性。這將確保標題保持可見並始終保持在其指定位置。
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}
將平滑滾動屬性合併到 HTML 標籤中，以優雅的方式增強整體使用者體驗:
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
此頁面的滾動經過優化，在不同部分之間轉換時無縫且流暢，提供更愉快的用戶體驗。
您的瀏覽器不支援影片標籤。
使用 CSS 黏性標題提升 Web 導航
在網頁設計中加入持久標題可以顯著增強整體使用者體驗。透過這樣做，它可以讓訪客保持對主導航選單的認知，維護統一的品牌標識，並為您的網站提供最新的外觀。
利用 CSS 的功能，實現這一結果既輕鬆又有效。固定標題的永久存在對於各個行業來說都是非常有益的，因為儘管隨著時間的推移，它在網頁設計趨勢中具有持久的相關性。