这甚至可以通过Twitter Bootstrap实现吗?http://www.usatoday.com/opinion/
当您向下滚动时,只有菜单部分应保留在顶部?如果有人有方便的jsfiddle版本,那就太好了。
您可以通过使用导航栏并使用后缀插件来使其工作。我这里有一个(非常粗略的)工作示例: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过渡,让这种魔术发生。