Смещение страницы, чтобы липкий заголовок не покрывал автоматически сгенерированные якоря

Question

Я использую jekyll для генерации своих страниц, и, как известно, использующие jekyll, теги привязки для h-тегов генерируются автоматически.

Решения, которые я не ищу:

1. Добавьте отступы - мои h-теги используют поля, потому что я нормальный человек. Кроме того, мой липкий заголовок имеет высоту 50px, что означает, что для всех моих h-тегов потребуется минимальное добавление 55(ish)px. Это вызывает слишком большой интервал.
2. Создайте свой собственный якорь в span тег - это побеждает точку сгенерированных тегов, и я пытаюсь вести СУХОЙ образ жизни.

Резюме: мне нужно сместить позицию якоря без изменения местоположения h-тега.

---

Если на этот вопрос уже был дан ответ, я прошу прощения за создание дублирующего вопроса. Я не мог найти ответ на этот вопрос, который не был "решен" с ранее упомянутыми "решениями".

Answer 1

Вы можете использовать :target псевдо-селектор, который соответствует, когда хеш в URL и идентификатор элемента совпадают. Следовательно, стиль будет применяться только к тегу h, к которому был выполнен переход, а не ко всем из них.

Например, вы можете использовать :target::before чтобы добавить поле в верхнюю часть выбранного тега:

:target::before {
      content: "";
      display: block;
      margin-top: -75px;
      height: 75px;
}

Здесь этот метод использовался вместе с анимацией, которая удаляет поле через одну секунду, чтобы поле больше не существовало, если / когда пользователь прокручивает страницу вверх.

Answer 2

Добавление этого решило мою проблему.

      html {
  scroll-padding-top: 70px; /* height of sticky header */
}