Пространство за бутстрапом navbar

Используя bootstrap navbar, я пытаюсь выяснить, как заставить его не скрывать верхнюю часть раздела тела.

На самом деле, он очень хорошо решается с помощью того, что рекомендуется здесь:

Twitter Bootstrap - верхняя панель навигации, блокирующая верхнее содержимое страницы

Но есть еще что-то, что не работает: когда у вас есть ссылка вроде этого:

<li><a href="#section1">Go to Section 1</a></li>
<li><a href="#section2">Go to Section 2</a></li>
<li><a href="#section3">Go to Section 3</a></li>
<li><a href="#section4">Go to Section 4</a></li>

и

<h4 id="Section 1">Section 1</h4>
<p>Content of Section 1</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 2">Section 2</h4>
<p>Content of Section 2</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 3">Section 3</h4>
<p>Content of Section 3</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 4">Section 4</h4>
<p>Content of Section 4</p>
<p><a href="#">Back to Top</a></p>

В этом случае, когда вы нажимаете, например, на прямую ссылку (или ярлык) раздела 2, страница правильно прокручивается вниз до раздела 2, но она скрывает ее начало за навигационной панелью загрузки.

Есть ли какая-нибудь подсказка о том, как это можно зафиксировать?

ОТВЕТЫ

Ответ 1

Добавив целевой псевдоним-селектор: связанный CSS, вы можете применить определенное дополнение к выбранной ссылке (пока оно отображается в вашем браузере как: www.example.com # link1).

Я провел последние 2 часа, пытаясь найти в Интернете, пытаясь найти JQuery или JS для применения дополнения к целевому div и после изменения найденных поисковых терминов Google это

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

Ответ 2

Поместите верхнее дополнение на ваш <h4>, чтобы указать высоту navbar. То есть поместите это в свой CSS:

h4 {
  padding-top: 30px;
}

Конечно, измените 30px на фактическую высоту navbar.

Ответ 3

У меня была такая же проблема, и я не нашел реального решения, но просто обходные пути (например, сама работа "padding-top", которая кажется мне очень хакерской). Похоже, что проблема с верхним баром все еще не решена, люди просто так обманывают ее.

Один неинвазивный подход, который работает для меня (насколько это возможно), заключается в том, чтобы добавить на страницу следующий JavaScript (кроме халата "padding-top" ):

var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);

Я нашел это в комментарии к проблеме GitHub bootstrap. Однако функция не выполняется во всех необходимых случаях (например, при повторном соединении с тем же якорем).

Более надежная работа перемещает позиции привязки с использованием относительного позиционирования CSS (найдено в fooobar.com/info/12046/...:

a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}

Однако это более инвазивно, потому что вы должны дать своим якорям класс (чтобы отличить его от ссылок). Поэтому вам нужно обновить весь ваш якорный HTML-код (что может быть не всегда возможно, например, когда вы имеете дело с жесткой CMS, которая генерирует ваши якоря):

<a class="anchor" id="top"></a>