Навигация по страницам с фиксированным заголовком
У меня есть горизонтальный фиксированный заголовок в верхней части моего сайта, и когда я использую навигацию по страницам для прокрутки до идентификатора, он помещает содержимое, которое я пытаюсь прокрутить, под заголовком.
Есть ли способ, которым я могу сместить, когда страница навигации отображается вверх на 80 пикселей (вниз)?
Редактировать: я на самом деле смог исправить это сам самым простым и приемлемым способом. Я поставил решение в ответ ниже.
4 ответа
Ну, так как никто не получил ответа, я исправил его сам.
Вот исправление:
Это было сделано путем скрытого div это абсолютно положенное количество пикселей "x" над содержимым, к которому я хочу прокрутить. Затем я прокручиваю до этого div вместо контента, который я изначально хотел прокрутить. 'x' должно быть высотой вашего заголовка, таким образом, содержимое, к которому вы хотите прокрутить, появляется прямо под вашим заголовком, как и должно быть.
Вы можете сделать это с помощью CSS.
HTML:
<header>Your Header Here</header>
<div id=main>Rest of Content</header>
CSS:
header { position: fixed; height: 80px; }
#main { margin-top: 80px; }
Попробуйте прочитать это произведение от Криса Койера. Он ловко использует псевдоэлемент для решения проблемы "фиксированный заголовок в навигации по страницам". Посмотрите: http://css-tricks.com/hash-tag-links-padding/.
Пример не показывает, как это работает. Я исправил это, добавив:
#header {
opacity:0.5;
}
#content-scroller {
height:120px;
}