Исправлено перекрытие заголовка страницы внутри якоря страницы

Question

Если на HTML-странице есть заголовок без прокрутки, прикрепленный к вершине с определенной высотой:

Есть ли способ использовать привязку URL (часть #fragment), чтобы браузер прокручивал до определенной точки на странице, но при этом учитывал высоту фиксированного элемента без помощи JavaScript ?

http://foo.com/#bar

WRONG (but the common behavior):         CORRECT:
+---------------------------------+      +---------------------------------+
| BAR///////////////////// header |      | //////////////////////// header |
+---------------------------------+      +---------------------------------+
| Here is the rest of the Text    |      | BAR                             |
| ...                             |      |                                 |
| ...                             |      | Here is the rest of the Text    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

Answer 1

CSS трюк будет обходным путем.Правильное решение, которое будет работать во всех сценариях, может быть реализовано с использованием jQuery.

См. https://codepen.io/pikeshmn/pen/mMxEdZ

Подход: Мы получаем высоту фиксированной навигации, используя document.getElementById ('header'). offsetHeight И сместить прокрутку до этого значения.

var jump=function(e){  

e.preventDefault();                        //prevent "hard" jump
  var target = $(this).attr("href");       //get the target

      //perform animated scrolling
      $('html,body').animate(
        {
          scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5  //get top-position of target-element and set it as scroll target
        },1000,function()                  //scrolldelay: 1 seconds
        {
          location.hash = target;          //attach the hash (#jumptarget) to the pageurl
        });
      }

  $(document).ready(function()
  {
    $('a[href*="#"]').bind("click", jump); //get all hrefs
    return false;
  });

PS:

• Включает отличную разницу в 5 пикселей междузаголовок и цель
• Эффект прокрутки не сложный, довольно плавный;Плавная прокрутка

Answer 2

Очень простой ответ только для CSS - поместить это в начало вашей таблицы стилей:

a{padding-top: 90px;}
a:link{padding-top: unset;}

Первый стиль регулирует все теги привязки, где вторые стили привязывают теги с гиперссылкой.

Примечание. В настоящее время это работает в Firefox и Edge, но не в Chrome.