引導Twitter的固定頂小的導航菜單

Question

這甚至可能通過Twitter的引導 http://www.usatoday.com/opinion/

當向下滾動，只有菜單部分應保持在頂貼？如果任何人有方便的jsfiddle版本，這將是非常好的。

Answer 1

您可以通過使用導航欄並使用affix plugin來獲取它。我在這裏有一個（非常粗糙的）工作示例：http://bootply.com/87472。最重要的位在CSS：

header {   //this is whatever is sitting above the navbar. 
    height:50px;  //this can be set to anything, just make it match 
        //the data-offset-top in the HTML (see below) 
}  
.affix { 
    width:100%;  //makes sure the "affixed" navbar stretches the full width 
    top:0;   //makes it stick to the top when it gets there. 
} 
.affix + p {  //this is whatever is sitting below the navbar 
    margin-top:70px; //set to the total height of your navbar 
} 

在HTML位，你需要：

<div class="navbar navbar-default" data-spy="affix" data-offset-top="50"> 

如上所述，data-offset-top應匹配任何元素是坐在你的導航欄上方的總高度。

至於奇特的效果，我建議你看看css transitions，以使該魔術發生。