jQuery 将内容/横幅放在“固定顶部导航栏”上方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19028299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Putting content/banner above the "Fixed Top Navbar"
提问by mcvkr
I want to put an banner onto the fixed top navbarof the Bootstrap. My aim is using the navbar as the navigation for operations and putting a banner of the project above it. It will be cool if navbar is alway there in case of scrolling, but it is better for banner to disappear.
我想在 Bootstrap的固定顶部导航栏上放置横幅。我的目标是使用导航栏作为操作导航，并在其上方放置项目横幅。如果在滚动时导航栏一直在那里会很酷，但横幅最好消失。
How can I achieve that, any examples?
我怎样才能做到这一点，任何例子？
回答by randwa1k
The trick is in using affix, and then you don't necessarily need to put the banner in the <header>.
诀窍在于使用affix，然后您不一定需要将横幅放在<header>.
css:
css：
#topnavbar {
margin: 0;
}
#topnavbar.affix {
position: fixed;
top: 0;
width: 100%;
}
js:
js：
$('#topnavbar').affix({
offset: {
top: $('#banner').height()
}
});
html:
html：
<div class="container" id="banner">
<div class="row">
<h1> Your banner </h1>
</div>
</div>
<nav class="navbar navbar-default navbar-static-top" role="navigation" id="topnavbar">
...
</nav>
Check out the demo in bootstrap 3.1.1.
回答by fassetar
In response with Skelly's solution, I would not recommend using bootstrap's grid system to style your header. The reason being that on mobile devices this will create unnecessary line separating or unwanted spacing even with the use of "hidden-sm". You can see this as you bring the right element closer to the left element on your browser.
作为对 Skelly 解决方案的回应，我不建议使用引导程序的网格系统来设置标题的样式。原因是在移动设备上，即使使用“hidden-sm”，这也会产生不必要的行分隔或不需要的间距。当您在浏览器上将右侧元素靠近左侧元素时，您可以看到这一点。
Instead use.. "nav-header"
而是使用..“导航标头”
<header class="masthead">
<div class="container">
<div class="nav-header">
<h1>
<a href="#" title="scroll down for your viewing pleasure">
Bootstrap 3 Layout Template
</a>
<p class="lead">Big Top Header and Fixed Sidebar</p>
</h1>
<div class="pull-right hidden-sm">
<h1>
<a href="#"><i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</h1>
</div>
</div>
</div>
</header>
