בעיה ההדר מכסה את העוגן anchor

נתקלתי בבעיה בעוגנים, כאשר ההדר מכסה את העוגן, הרבה מהאתרים היום משתמשים ב sticky header וכאשר רוצים לעשות עוגן אז הוא יוצא ממש מתחת להאדר, אפשר לפתור את זה בעזרת js שזה פתרון מסובך, ואפשר לפתור את זה גם בעזרת שורת קוד אחת ב css ( לא תומך ב IE )

השורה היא :

scroll-margin-top:200px;

שמים אותה בקלאסס של העוגן והיא פשוט מתייחסת לעוגן כיאילו הוא קצת יותר למעלה אפשר כמובן ב em או בכל יחידות שרוצים

אפשר לראות הסבר יותר מקיף באתר הזה:

https://gomakethings.com/how-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header-with-one-line-of-css/

הם נותנים שם 2 דוגמאות לנושא :

לפני הפתרון :

https://codepen.io/cferdinandi/pen/vYOZMRN

אחרי הפתרון :

https://codepen.io/cferdinandi/pen/vYOZMRN