如何在 CSS 中使用固定標頭來防止錨點跳躍？

固定標頭的錨點偏移：精確指南

在網頁上使用固定標頭時，經常會遇到不和諧的跳轉當導航到位於頁面下方的錨點。這是因為錨點與視窗頂部對齊，從而使內容在標題後面變得模糊。

為了緩解此問題，我們可以引入偏移量來補償標題的高度。此偏移可確保錨點定位在正確的位置、滾動並無障礙地顯示內容。

HTML/CSS 解決方案：

純 CSS 方法是可能的，無需對 JavaScript 的需求。為錨點元素分配一個唯一的類，例如「anchor」：

<a class="anchor">

接下來，使用CSS 設定錨點樣式，使其成為區塊元素，並以等於標題的負頂部偏移量相對定位它高度（例如，-250px）：

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

此修改將使錨點垂直偏移250px，確保當它啟動時，頁面會滾動以在所需位置顯示內容，而不會被固定標題隱藏。

以上是如何在 CSS 中使用固定標頭來防止錨點跳躍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！