web-dev-qa-db-ja.com

ブートストラップ、スクロールダウンした後にnavbarをスティッキーにしますか？

ヘッダー画像の下にあるnavbarがあります。下にスクロールすると、ナビゲーションバーがWebページの上部に貼り付けられます。必要なjQueryまたはCSSを考えることはできません。navbarはヘッダー画像の真下に固定されているように見えるため、ギャップが残っています。

<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>
javascriptjqueryhtmlcsstwitter-bootstrap
21
user2441391

ヘッダー画像がスクロールして離れたときにのみ、ナビゲーションバーを画面の上部に固定したい場合は、 bootstrap affixプラグイン を使用できます。

19
Nathan Breit

Jqueryコードをこれに置き換えるだけです：

$('#sidebar').affix({
  offset: {
    top: 50
  }
});

そして、一番上に合わせてトップを調整します。

4
Henrique