Бывало такое, что sticky header перекрывает заголовки, на которые ведут якорные ссылки?

Простое решение: scroll-margin-top

Что это делает:

Добавляет дополнительный отступ сверху у заголовка.

Якорные ссылки продолжают работать, но заголовок оказывается ниже sticky header, так что хедер больше не перекрывает его часть.

Как использовать:

Если высота вашего хедера 80px, добавьте это к заголовкам:

scroll-margin-top: 80px;

Теперь, когда кто-то кликает по якорной ссылке, браузер прокручивает страницу до заголовка, но оставляет сверху 80px.

Заголовок отображается ниже хедера.

Дополнительный совет: если высота хедера меняется, например на мобильных устройствах, используйте CSS-переменные:

scroll-margin-top: var(--header-height);

Поддержка браузеров: около 96%

Одна строка CSS. И якорные ссылки наконец работают так, как этого ждут пользователи.

@WebDev_Plus