Bootstrap Affix Navの下にジャンプするには

Question

Bootstrapの接尾辞機能を使用してJSFiddleを作成し、スクロールしてヘッダーを外に移動させたときに画面上部にナビをとどめました。

私が抱えている問題は、純粋なHTMLを使用すると、navの下のテキストが上にジャンプし、navの後ろに隠れてしまうことです。

問題のコードhereを確認してください。ここで

は私が使用したコードです：

<div class="container"> 
<div class="row"> 
    <div class="span12"> 
     <div class="well"> 
      <h1>Banner</h1> 
     </div> 
    </div> 
</div> 
</div> 
<div class="nav-wrapper"> 
<div class="nav navbar affix" data-spy="affix" data-offset-top="120"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <div class="span12"> 
       <a class="brand" href="#">My Brand</a> 
       <span class="navbar-text"> 
        This is a navbar. 
       </span> 
      </div>  
     </div> 
    </div> 
</div> 
</div> 
<div class="container"> 
<div class="span3"> 
    <h2>some lorem ipsum for scrolling:</h2> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
</div> 
</div> 

次のようにCSSは次のとおりです。

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

私は非常に同様の問題hereを見つけましたが、何らかの理由で、その例のようなコードを使用した場合それは私にとってはうまくいかない。

次のようにトリックをしたCSSの余分な部分は次のとおりです。

.affix + .container { 
    padding-top:50px 
} 

私も所望の効果を作成するために、次のコードを使用して、このようなthis one hereなどのJavaScriptソリューションの承知している：

$(function() { 
    $('#nav-wrapper').height($("#nav").height()); 

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

CSSパディングトップ修正を使用して以前の修正プログラムを実装するときに、特定のHTML専用バージョンが動作しない理由を理解しようとしています。

ありがとうございました。

Answer 1

これは動作するようです：jsFiddle更新

.nav-wrapper 
{ 
    min-height:50px; 
} 

：接辞プラグインは.affixクラスを持つ要素を作ることは何が起こっているhttp://jsfiddle.net/yYE62/5/

は、ドキュメント内の固定ポジションを持っています。これにより、フロー（またはレイアウト）から添付された要素が削除され、コンテナが折りたたまれます。それが起こると、下のコンテンツは、占有するのに使用されたスペースを埋めるようにスライドします。

上記のルールを追加することで、コンテントの有無にかかわらず、コンテナーに最小の高さを維持するよう指示します。それは50pxである必要はありません。デフォルトの高さは.navbarなので、ニーズに合わせて調整してください。 すべて.nav-wrapperに最小高さを設定しない場合は、idを割り当てて、代わりに使用してください。

Answer 2

完全に機能するには、追加のラッパーが必要です。あなたに貼り付けているものとまったく同じ最小の高さを与えてください:)