資訊專欄INFORMATION COLUMN
摘要：一般常見(jiàn)于文檔頁(yè)面，復(fù)現(xiàn)如下點(diǎn)擊右側(cè)的目錄，快速定位至，結(jié)果被遮住為方便觀察，設(shè)置。代碼給每個(gè)錨點(diǎn)增加屬性解決后效果糾正偏移后，能準(zhǔn)確定位，且不影響頁(yè)面布局。修復(fù)后的代碼原創(chuàng)說(shuō)明此篇文章記錄于年月日實(shí)際項(xiàng)目開(kāi)發(fā)中遇到的問(wèn)題。
背景 復(fù)現(xiàn)
當(dāng)頁(yè)面中帶有position:fixed的header時(shí)，通過(guò)id進(jìn)行定位時(shí)，一般會(huì)有偏差。一般常見(jiàn)于文檔頁(yè)面，復(fù)現(xiàn)如下：
點(diǎn)擊右側(cè)的目錄，快速定位至title2，結(jié)果被header遮住（為方便觀察，header設(shè)置opacity:0.95）。
期望能實(shí)現(xiàn)準(zhǔn)確定位。
demo代碼：
解決問(wèn)題 思路Fixed header anchor offset
給每個(gè)anchor設(shè)置偏移，糾正這個(gè)偏差。
代碼給每個(gè)錨點(diǎn)h3增加css屬性：
#app #main h3::before {
content: "";
display: block;
height: var(--header-height);
margin-top: calc(var(--header-height) * -1);
visibility: hidden;
}
解決后效果
糾正偏移后，能準(zhǔn)確定位，且不影響頁(yè)面布局。
原創(chuàng)說(shuō)明Fixed header anchor offset
此篇文章記錄于2019年8月1日實(shí)際項(xiàng)目開(kāi)發(fā)中遇到的問(wèn)題。
參考自： fixed-page-header-overlaps-in-page-anchors
轉(zhuǎn)載請(qǐng)注明出處，謝謝。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116284.html
閱讀 1221·2021-09-22 15:24
閱讀 2315·2019-08-30 15:44
閱讀 2694·2019-08-30 10:55
閱讀 3387·2019-08-29 13:25
閱讀 1673·2019-08-29 13:09
閱讀 1425·2019-08-26 14:05
閱讀 1423·2019-08-26 13:58
閱讀 2012·2019-08-26 11:57
