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