Css 引导twitter固定顶部较小的导航菜单

Css 引导twitter固定顶部较小的导航菜单,css,twitter-bootstrap,fixed,navigationbar,affix,Css,Twitter Bootstrap,Fixed,Navigationbar,Affix,这甚至可以通过Twitter引导实现吗 向下滚动时,只有菜单部分应保留在顶部?如果有人有现成的JSFIDLE版本,那就太好了。您可以通过使用导航栏和。我这里有一个(非常粗略的)工作示例:。CSS中有重要的部分: header { //this is whatever is sitting above the navbar. height:50px; //this can be set to anything, just make it match

这甚至可以通过Twitter引导实现吗


向下滚动时,只有菜单部分应保留在顶部?如果有人有现成的JSFIDLE版本,那就太好了。

您可以通过使用导航栏和。我这里有一个(非常粗略的)工作示例:。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">

如上所述,
数据偏移顶部
应与导航栏上方任何元素的总高度相匹配

至于花式效果,我建议你去看看,让魔法发生