jquery - 「Fixed Top Navbar」の上にコンテンツ/バナーを配置する

Question

Bootstrap の固定トップ ナビゲーション バーにバナーを配置したいと考えています。私の目的は、ナビゲーション バーを操作のナビゲーションとして使用し、その上にプロジェクトのバナーを配置することです。スクロール時に常にナビゲーションバーがあればかっこいいですが、バナーは消えたほうがいいです。

どうすればそれを達成できますか、例はありますか?

Answer 1

トリックは を使用affixすることにあり、バナーを に入れる必要は必ずしもありません<header>。

CSS:

#topnavbar {
    margin: 0;
}
#topnavbar.affix {
    position: fixed;
    top: 0;
    width: 100%;
}

js:

$('#topnavbar').affix({
    offset: {
        top: $('#banner').height()
    }   
});

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>

ブートストラップ 3.1.1 のデモをチェックしてください。

Answer 2

Skelly のソリューションに対応して、ヘッダーのスタイルを設定するためにブートストラップのグリッド システムを使用することはお勧めしません。その理由は、モバイル デバイスでは、「hidden-sm」を使用しても不要な行区切りや不要なスペースが作成されるためです。これは、ブラウザーで右の要素を左の要素に近づけるとわかります。

代わりに..「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>