Как мне компенсировать, где меня фиксирует фиксированная навигационная панель?

Ответ 1

Вы можете попробовать абсолютно позиционировать "dummy" якорь 40 пикселей над верхней частью каждого раздела. Вы можете дать им нулевую ширину/высоту и скрытую видимость, чтобы гарантировать, что эти привязки не влияют на отображение страницы. Когда пользователь нажимает одну из ссылок на вашей фиксированной панели навигации, окно будет прокручиваться до вершины фиктивного якоря, на 40 пикселей выше начала его фактического раздела.

Пример HTML:

<div class="navbar">
  <a href="#anchor1">Anchor 1</a>
  <a href="#anchor2">Anchor 2</a>
  <a href="#anchor3">Anchor 3</a>
</div>
<div class="section">
  <span id="anchor1" class="anchor"></span>
  Section Content
</div>
<div class="section">
  <span id="anchor2" class="anchor"></span>
  Section Content
</div>
<div class="section">
  <span id="anchor3" class="anchor"></span>
  Section Content
</div>​

Пример CSS:

body {
    padding-top: 40px;
}
.navbar {
    position: fixed;
    width: 100%;
    height: 40px;
    top: 0;
    left: 0;
    z-index: 10;
    border-bottom: 1px solid #ccc;
    background: #eee;
}
.section {
    position: relative;
}
.anchor {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    z-index: -1;
    top: -40px;
    left: 0;
    visibility: hidden;
}

Для рабочего примера см. http://jsfiddle.net/HV7QL/

Изменить: CSS3 также включает псевдокласс класса :target, который применяется к элементу, на который id ссылается href ссылки в документе, или хеш значение URL-адреса. Вы можете применить 40-пиксельное дополнение к вершине :target, которое будет применяться только к разделу, который пользователь выбирает из фиксированной навигационной панели.

Пример CSS:

.section:target {
    padding-top: 40px;
}

Это семантически более чистое, чем метод, описанный выше, но не будет работать в старых браузерах.

Рабочий пример: http://jsfiddle.net/5Ngft/

Ответ 2

Я просто случайно наткнулся на эту проблему сегодня, поэтому я уже немного думал об этом, но, думаю, я нашел решение:

Добавьте элемент padding-top: 40px; margin-top: -40px к элементу, к которому вы хотите перейти. Отрицательный отступ отменяет отступ, но браузер все еще считает, что верхняя часть элемента на 40 пикселей выше, чем на самом деле (потому что на самом деле это только содержание его начинается ниже).

К сожалению, это может столкнуться с уже установленными полями и paddings, и если вы используете фон на целевом элементе, это все испортит.

Я посмотрю, смогу ли я обойти это и разместить jsfiddle, но в то же время здесь будет основной ответ:)

отредактирован: Я думал, что у меня есть решение для фона, но это не сработало. Удалено снова.

окончательное редактирование: Это работает, если вы знаете цвет фона элемента упаковки. В моем примере я знаю, что текст на белом фоне, но названия имеют серебряный фон. Чтобы заголовок не имел фона для дополнительного дополнения, мы поставили его на псевдоэлемент:

#three:before { 
    content: " ";
    background: white;
    display: block;
    margin-top: -40px;
    padding-top: 40px;
}

Таким образом, дополнительное дополнение имеет белый фон снова, но это работает только в том случае, если вы уже знаете, какой фон ему нужен. Например, для его прозрачности будет отображаться основной фон самого заголовка, а не статьи.

jsFiddle: http://jsfiddle.net/Lzve6/ Заголовок по умолчанию - это по умолчанию, с которым у вас проблемы. Heading two - мое первое решение, гарантированное работу почти со всеми браузерами Заголовок 3 использует псевдоэлемент :before, возможно, не работает в старых браузерах.