Bootstrap, faire un navbar collant après s'être défoulé?
j'ai une barre de navigation qui est au-dessous de l'image d'en-tête. Je veux que la barre de navigation colle au haut de la page Web quand je fais défiler vers le bas. Je ne peux pas penser au jQuery ou CSS requis, parce que la barre de navigation semble coller juste au-dessous de l'image d'en-tête laissant une certaine lacune.
<div class="headerwrap pull-center">
<div class="container">
<div id="header" class="row-fluid">
<div class="span5" id="phones">
<img class="phone" src="img/white.png" alt="">
</div>
<div class="span7" id="mm-logo">
<img class="mm-log" src="img/logo.png" alt="">
</div>
</div>
</div>
</div>
<div class="navbar navbar-inner" id="border-stuff">
<div class="span12">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 768px or less, place within here -->
<div class="nav-collapse collapse" id="center-nav">
<ul class="nav" >
<li><a href="#h1"><h3>Heading1</h3></a></li><li class="divider-vertical"></li>
<li><a href="#h2"><h3>Heading2</h3></a></li><li class="divider-vertical"></li>
<li><a href="#h3"><h3>Heading3</h3></a></li><li class="divider-vertical"> </li>
<li><a href="#h4"><h3>Heading4</h3></a></li><li class="divider-vertical"></li>
<li><a href="#h5"><h3>Heading4</h3></a></li>
</ul>
</div>
</div>
</div>
21
demandé sur
Sebastian Zartner
2013-07-17 01:17:18
2 réponses
si vous voulez que votre navbar reste fixe en haut de l'écran seulement une fois que l'image d'en-tête a disparu, vous pouvez utiliser le plugin bootstrap affix.
19
répondu
Nathan Breit
2013-12-05 18:20:43
Vous avez juste besoin de remplacer votre code Jquery par ceci:
$('#sidebar').affix({
offset: {
top: 50
}
});
et ajustez le dessus à ce qui convient le mieux.
4
répondu
Henrique
2014-02-26 18:16:54