ブートストラップでブラウザの上部にスクロールNavBarスティックを作成する

Question

Twitter Bootstrapを初めて使い、深いマストヘッドの下部にNavBarを配置し、ユーザーが垂直方向にページをスクロールしてNavBarがトップになるとページのスタイルを変更して、NavBarが固定になるようにします。私が望む効果は、http://www.happycog.com/と同じですが、これはBootstrap NavBarを使用している場合に限られます。

したがって、実際の問題は、NavBarを0の位置にスクロールしたときにnavbar-fixed-topスタイルをトリガーする方法です。つまり、ブラウザの上部です。

すべてのアイデアやポインターをいただければ幸いです。ありがとうございました。

Answer 1

これを行うにはjavascriptを使用する必要があります。ここでは、jQueryを使用して、レイアウトが変更されないように一時的なdivをその場所に貼り付けるだけでなく、ページの上端に移動したらnavbarの位置を固定に変換するソリューションを紹介します。

http://jsfiddle.net/T6nZe/

Answer 2

あなたはCSS3スティッキー位置を試すことができます。

.sticky { 
    position: sticky; 
    top: 10px; /* When the element reaches top: 10px, it becomes fixed. */ 
    z-index: 100; 
} 

ブラウザのサポート：http://caniuse.com/#feat=css-sticky

Answer 3

をより利用があるかもしれない次、ブラウザの互換性を目指して。

.sticky { 
    position: -webkit-sticky; 
    position: -moz-sticky; 
    position: -ms-sticky; 
    position: -o-sticky; 
    position: sticky; 
    top: 10px; 
    z-index: 100; 
} 

Answer 4

CSSクラスnavbar-fixed-topを追加します。

はここに例を示します

<nav class='navbar navbar-inverse navbar-fixed-top sticky' role='navigation'> 
    <!-- nav content --> 
</nav> 

Answer 5

私は、これはあなたが探しているものであると信じて： http://www.w3schools.com/bootstrap/bootstrap_affix.asp