Смещение привязных привязок с фиксированным заголовком

Было несколько похожих сообщений (смещение якоря html для настройки для фиксированного заголовка, например), но это решение не работает для моего конкретного случай.

Я использую jQuery для заполнения Оглавления, в частности, описанного здесь метода: http://css-tricks.com/automatic-table-of-contents/. Он ищет теги h2 в статье, а затем создает привязывающие ссылки.

Проблема заключается в том, что я использую фиксированный заголовок. Когда я нажимаю на одну из этих привязанных ссылок, целевой h2 находится под заголовком. Одно временное решение, которое я использую:

h2:target{
  padding-top:[header-height];
}

Это работает до тех пор, пока вы не прокрутите резервную копию, и там будет огромный пробел в середине содержимого. У вас есть идеи по поводу того, как я могу компенсировать эти привязные ссылки для учета заголовка? Я хотел бы сохранить HTML как семантический, насколько это возможно. Любая помощь будет оценена.

Здесь jsFiddle того, о чем я говорю: http://jsfiddle.net/aweber9/GbNFv/

Спасибо.

Ответы

Ответ 1

Вы можете включить padding-top, а затем использовать отрицательный margin-top, чтобы сбалансировать его.

jsFiddle

h2 {
    padding-top: 70px;
    margin-top: -70px;
}

Ответ 2

@Решение Daniel Imms хорошее, но если верхние поля заголовков имеют верхний предел, это будет reset по этому отрицательному верхнему краю. Я нашел решение, которое использует псевдоклассы:

h2:before {
    display: block;
    content: " ";
    height: 20px;  /* Give height of your fixed element */
    margin-top: -20px; /* Give negative margin of your fixed element */
    visibility: hidden;
}

Таким образом, это не reset оригинальный верхний край.

Ответ 3

Я нахожу, что оба ответа вместе обеспечивают наиболее надежное решение для нескольких браузеров. Я включаю оба в свой CSS...

a[name]:not([href]) {
    padding-top: 90px;
    margin-top: -90px;
}
a[name]:not([href]):before {
    display: block;
    content: " ";
    padding-top: 90px;
    margin-top: -90px;
    visibility: hidden;
}

Ответ 4

Это сработало для меня.

:target {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}