ブートストラップのアニメーションnavbar width

Question

私は、boostrap navbarでヘッダメニューを構築しようとしています。私のnavbarを持っている瞬間、そしてscrollに私はクラスnavbar-fixed-topを追加し、navbarはページの全幅をカバーします。

今、私は私がナビゲーションバーに固定されたトップクラスのCSSトランジションエフェクトが、何も変更を追加しようとしました

we can see hereように変化幅にアニメーションを追加します。 私のHTML構造：

<div class="row"> 
    <div class="col-md-8 col-md-offset-2"> 
     <nav class="navbar navbar-default"> 
      <div class="container"> 
       .... 
      </div><!-- /.container-fluid --> 
     </nav> 
    </div> 
</div> 

私のCSSコード：

.navfixed{ 
    position: fixed; 
    top:0; 
} 

と私はJQuery：あなたのアイデアを持っている場合は

var offset = $(".navbar").offset().top; 
$(document).scroll(function(){ 
    var scrollTop = $(document).scrollTop(); 
    if(scrollTop > offset){ 
     $(".navbar").addClass("navbar-fixed-top"); 


    } 
    else { 
     $(".navbar").removeClass("navbar-fixed-top"); 
    } 
}); 

。

どうもありがとう

Answer 1

使用

var scrollTop = $(window).scrollTop(); 

の代わり

var scrollTop = $(document).scrollTop(); 

か、また、ここでは完全なコードを参照してください

var scrollTop = $(this).scrollTop(); 

を使用することができます。

を

var offset = $(".navbar").offset().top; 
$(document).scroll(function(){ 
    var scrollTop = $(window).scrollTop(); 
    if(scrollTop > offset){ 
     $(".navbar").addClass("navbar-fixed-top"); 


    } 
    else { 
     $(".navbar").removeClass("navbar-fixed-top"); 
    } 
}); 

これはお役に立ちます。