Twitter Bootstrap Прикрепленный Navbar - div ниже вскакивает

Скорее трудно описать проблему. Так что просто посмотрите на этот jsFiddle:

Когда navbar привязана к вершине, содержимое скачет ниже.

CSS

.affix {
    position: fixed;
    top: 0px;
}
#above-top {
    height: 100px;
    background: black;
}

Где проблема?

Ответ 1

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

.affix + .container {
    padding-top:50px
}

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

Ответ 2

Вы также можете использовать события аффикса Bootstrap для добавления и удаления отступов (или полей) из соответствующего элемента с помощью классов CSS:

// add padding or margin when element is affixed
$("#navbar").on("affix.bs.affix", function() {
  return $("#main").addClass("padded");
});

// remove it when unaffixed
$("#navbar").on("affix-top.bs.affix", function() {
  return $("#main").removeClass("padded");
});

Вот JSFiddle: http://jsfiddle.net/mumcmujg/1/

Ответ 3

Мое решение, вдохновленное @niaccurshi's:

Вместо жесткого кодирования padding-top создайте невидимый повторяющийся элемент, который занимает такое же пространство, но только при прикреплении исходного элемента.

JS:

var $submenu = $(".submenu");

// To account for the affixed submenu being pulled out of the content flow.
var $placeholder = $submenu.clone().addClass("affix-placeholder");
$submenu.after($placeholder);

$submenu.affix(…);

CSS

.affix-placeholder {
  /* Doesn't take up space in the content flow initially. */
  display: none;
}

.affix + .affix-placeholder {
  /* Once we affix the submenu, it *does* take up space in the content flow. But keep it invisible. */
  display: block;
  visibility: hidden;
}

Ответ 4

Альтернатива, если вы хотите избежать дублирования контента.

<script>
    jQuery(document).ready(function(){
        jQuery("<div class='affix-placeholder'></div>").insertAfter(".submenu:last");
    });
</script>

<style>
.affix-placeholder {
  display: none;
}
.affix + .affix-placeholder {
  display: block;
  visibility: hidden;
  height: /* same as your affix element */;
  width: 100%;
  overflow: auto;
}
</style>

Ответ 5

Добавьте обертку заголовка вокруг разделов над ней. И дайте обертке минимальную высоту, равную высоте этих элементов вместе взятых.

Пример:

<div class="header-wrapper" >
   <div class="topbar" >this bar is 36 pixels high</div>
   <div class="menubar">this menubar has a height of 80 pixels</div>
</div>

<div class="" >Your container moving upwards after the affix element becomes fixed</div>

Высота обоих элементов 36 + 80 = 116. Минимальная высота оболочки заголовка должна составлять 116 пикселей, см.

.header-wrapper {
  min-height: 116px;
}

Очень простое и аккуратное решение