很多網(wǎng)站都有一個固定在上方的導(dǎo)航欄，方便用戶搜索和跳轉(zhuǎn)到其他頁面。

同時為了方便用戶瀏覽長文檔，都會加上目錄，點擊段落標(biāo)題跳轉(zhuǎn)到段落所在的位置，

如圖所示：

如果使用錨點實現(xiàn)目錄的跳轉(zhuǎn)會遇到 fixed 導(dǎo)航欄遮住了標(biāo)題的問題。

1. 錨點定位機制

如果沒有滾動條，錨點失效。

如果有滾動條，滾動條滾動到地址 hash （地址 # 號后面的內(nèi)容）對應(yīng)的錨點元素padding-box上邊緣位置。

2. 解決方案

示例

示例源碼

示例在線預(yù)覽

（1）padding+margin

padding影響錨點元素的定位，margin不影響錨點元素的定位。所以使用padding調(diào)整錨點元素跳轉(zhuǎn)后的位置，使用margin抵消padding對布局的影響。

<h3 class="heading first" id="first">
    1.出現(xiàn)的時間、地點不同
</h3>

.first {
    padding-top: 60px;/* 60px是導(dǎo)航欄高度 */
    margin-top: -60px;
 }

優(yōu)點

此方案無需添加額外的元素，直接使用 css 可解決問題。

缺點

當(dāng)標(biāo)題的文檔層級和段落的文檔層級不一致時會導(dǎo)致遮蓋其他元素。

例如：標(biāo)題使用了 relative 定位提升了文檔層級。會出現(xiàn)鼠標(biāo)無法選中標(biāo)題上方被布局遮擋的段落，從而導(dǎo)致無法復(fù)制文檔。

（2）用span或a標(biāo)簽作為錨點元素

非替換內(nèi)聯(lián)元素的padding不影響布局，但可以影響錨點位置。

<h3 class="heading">
    <span id="second" class="title_placeholder">
    2. require/exports 是運行時動態(tài)加載，import/export 是靜態(tài)編譯
    </span>
</h3>

.title_placeholder {
    padding-top: 60px;
}

缺點

同方案（1）

（3）暗錨點

在需要定位的元素上方加入不影響布局的空白錨點元素。

因為錨點跳轉(zhuǎn)后的位置會落在元素的padding-box上邊緣，設(shè)置 height影響錨點位置，設(shè)置margin-top抵消暗錨對布局對影響。

<div class="dark_anchor" id="third"></div>
<h3 class="heading">
    3. require/exports 輸出的是一個值的拷貝，import/export 模塊輸出的是值的引用
</h3>

.dark_anchor {
    height: 60px;
    margin-top: -60px;
}

優(yōu)點

不影響其他元素的鼠標(biāo)選擇

缺點

此方案的定位元素的margin會影響錨點跳轉(zhuǎn)后的位置，和直接設(shè)置標(biāo)題為錨點元素的表現(xiàn)不一致。

例如：標(biāo)題（定位元素）有 20px 的邊距，錨點跳轉(zhuǎn)后20px的邊距依舊保留。如果希望錨點跳轉(zhuǎn)后標(biāo)題置頂不受 margin影響的同學(xué)慎用此方案。

（4）:target偽類

:target CSS 偽類 代表一個唯一的頁面元素(目標(biāo)元素)，其id 與當(dāng)前URL片段匹配 .

<h3 id="forth" class="heading">4. 用法不一致</h3>

:target {
    padding-top: 60px;
    margin-top: -60px;
  }

此方案和方案（1）有異曲同工之妙，當(dāng)跳轉(zhuǎn)到某個（類）錨點時，錨點元素應(yīng)用 :target 樣式。

:target瀏覽器兼容性：

3. 參考資料

URL錨點HTML定位技術(shù)機制、應(yīng)用與問題

純CSS實現(xiàn)網(wǎng)頁內(nèi)部錨點跳轉(zhuǎn)時上下偏移

當(dāng)錨點遇到fixed定位

到此這篇關(guān)于css錨點定位被頂部固定導(dǎo)航欄遮住的解決方案的文章就介紹到這了,更多相關(guān)css錨點被頂部固定導(dǎo)航欄遮住內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論