Twitter Bootstrap貼上Navbar - div下跳起來

Question

很難描述問題。所以，單看這的jsfiddle：

http://jsfiddle.net/xE2m7/

當導航欄被固定在頂部的內容跳到下方。

CSS：

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

問題出在哪裏？

Answer 1

這裏的問題是，導航欄已被固定到頂端，導航欄下面的容器中的其他內容無法傳遞。你可以做到這一點使用更現代化的CSS，但要知道，這不會是舊版本瀏覽器修復（確實也有可能與現在的位置發現的問題：在舊的瀏覽器太固定屬性...

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

此等待，直到導航欄是固定的，然後添加填充到是它的兄弟姐妹，從「跳樓」保持它的導航下的容器

Answer 2

我的解決方案，靈感來自@ niaccurshi的：

代替硬編碼一個填充頂部，創建一個不可見的重複元素，佔用相同數量的空間，但只有當原始元素被粘貼時。

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

您還可以使用引導貼上事件添加和移除填充（或保證金）從相關元素通過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/