資訊專欄INFORMATION COLUMN
摘要：一般常見于文檔頁面，復現如下點擊右側的目錄，快速定位至，結果被遮住為方便觀察，設置。代碼給每個錨點增加屬性解決后效果糾正偏移后，能準確定位，且不影響頁面布局。修復后的代碼原創說明此篇文章記錄于年月日實際項目開發中遇到的問題。
背景 復現
當頁面中帶有position:fixed的header時，通過id進行定位時，一般會有偏差。一般常見于文檔頁面，復現如下：
點擊右側的目錄，快速定位至title2，結果被header遮住（為方便觀察，header設置opacity:0.95）。
期望能實現準確定位。
demo代碼：
解決問題 思路Fixed header anchor offset
給每個anchor設置偏移，糾正這個偏差。
代碼給每個錨點h3增加css屬性：
#app #main h3::before {
content: "";
display: block;
height: var(--header-height);
margin-top: calc(var(--header-height) * -1);
visibility: hidden;
}
解決后效果
糾正偏移后，能準確定位，且不影響頁面布局。
原創說明Fixed header anchor offset
此篇文章記錄于2019年8月1日實際項目開發中遇到的問題。
參考自： fixed-page-header-overlaps-in-page-anchors
轉載請注明出處，謝謝。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116284.html
閱讀 1190·2021-09-22 15:24
閱讀 2292·2019-08-30 15:44
閱讀 2620·2019-08-30 10:55
閱讀 3360·2019-08-29 13:25
閱讀 1644·2019-08-29 13:09
閱讀 1399·2019-08-26 14:05
閱讀 1389·2019-08-26 13:58
閱讀 1987·2019-08-26 11:57
