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

Question

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

http://jsfiddle.net/xE2m7/

Когда Navbar фиксируется к началу содержание подскакивает под ним.

CSS:

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

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

Answer 1

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

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

Это ждет, пока индикатор нав не фиксирована, а затем добавляет отступы в контейнер, который является его родной брат, держа его от «прыгает» под нав

Answer 2

Мое решение, вдохновленный @ niaccurshi-х:.

Вместо hard-coding 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; 
} 

Answer 3

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

<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> 

Answer 4

Вы также можете использовать 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/