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

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

如圖所示：

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

1. 錨點(diǎn)定位機(jī)制

如果沒(méi)有滾動(dòng)條，錨點(diǎn)失效。

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

2. 解決方案

示例

示例源碼

示例在線預(yù)覽

（1）padding+margin

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

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

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

優(yōu)點(diǎn)

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

缺點(diǎn)

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

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

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

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

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

.title_placeholder {
    padding-top: 60px;
}

缺點(diǎn)

同方案（1）

（3）暗錨點(diǎn)

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

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

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

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

優(yōu)點(diǎn)

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

缺點(diǎn)

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

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

（4）:target偽類

:target CSS 偽類 代表一個(gè)唯一的頁(yè)面元素(目標(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)到某個(gè)（類）錨點(diǎn)時(shí)，錨點(diǎn)元素應(yīng)用 :target 樣式。

:target瀏覽器兼容性：

3. 參考資料

URL錨點(diǎn)HTML定位技術(shù)機(jī)制、應(yīng)用與問(wèn)題

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

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

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

最新評(píng)論