Как учитывать маржу тела на HTML-якорь
У меня есть эта страница с фиксированным набером сверху (с использованием начальной загрузки navbar).
Страница содержит меню, содержащее ссылки на различные части страницы с использованием якорей HTML. Дело в том, что позиция прокрутки не идеальна, потому что у меня эта панель навигации занимает первые 50 пикселей страницы, поэтому после нажатия на ссылку html, чтобы привязать ее, содержимое на 50 пикселей скрыто панелью навигации.
Я хочу сделать следующее: чтобы якорная ссылка учитывала первые 50 пикселей, чтобы она идеально прокручивалась до содержимого.
У кого-нибудь есть идеи как это исправить?
2 ответа
В Twitter Bootstrap существует необходимость в дополнительном интервале при исправлении навигационной панели.
Внизу (или после, вы могли бы сказать) вы захотите указать дополнительный интервал, необходимый для того, чтобы раскрыть скрытый контент из загадки и сделать его полезным.
дальнейшее чтение: http://getbootstrap.com/components/ (на самом деле они рекомендуют верхнюю часть отступа 70px к элементу body)
Вы можете разместить div, который имеет высоту 50px, над содержимым, к которому вы хотите прокрутить, а затем привязать к нему:
<a href="#link">Link</a>
<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>
JSFiddle Demo
Или, дайте контенту div padding-top, или же margin-top высоты панели навигации:
<a href="#link">Link</a>
<div id="link" class="content">
Content Here...
</div>
CSS:
.content{
padding-top:50px;
}