自举导航栏宽度上的动画

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"); 
    } 
}); 

这可能是有帮助的。