自舉導航欄寬度上的動畫

Question

我正在嘗試使用boostrap導航欄來構建標題菜單。目前我有我的導航欄，滾動我添加類navbar固定頂部，導航欄覆蓋頁面的整個寬度，一切都很好。

現在我想在寬度改變添加動畫爲we can see here

我嘗試添加上導航欄，固定一流的，但沒有變化的CSS過渡效果。 我的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"); 
    } 
}); 

這可能是有幫助的。