css - Bootstrap twitter 固定顶部较小的导航菜单

Question

这甚至可以通过 Twitter Bootstrap http://www.usatoday.com/opinion/

向下滚动时，只有菜单部分应保持在顶部？如果有人有方便的 jsfiddle 版本，那就太好了。

Answer 1

您可以通过使用导航栏并使用词缀插件来使其工作。我在这里有一个（非常粗略的）工作示例：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 过渡以使这种魔术发生。