Bootstrap Navbar滑动滚动不平滑

Question

我希望我的导航栏在滚动后才显示。我已经用JS完成了，但是当它向上或向下滑动时有一个“步骤”。这里是JS代码：

$(document).ready(function(){ 
    // hide .navbar first 
    $(".navbar").hide(); 

    // fade in .navbar 
    $(function() { 
     $(window).scroll(function(){ 
     // set distance user needs to scroll before we fadeIn navbar 
      if ($(this).scrollTop() > 100) { 
       $('.navbar').slideDown(2000); 
      } 
      else { 
       $('.navbar').slideUp(2000); 
      } 
     }); 
    }); 
}); 

而且的jsfiddle：http://jsfiddle.net/3dcg2ygw/

我怎样才能得到它顺利？

Answer 1

的问题是，在导航栏的最小高度，在你的代码试试这个：

.navbar { 
    height: 97px; 
    background-color: #fff; 
    overflow:hidden; 
    min-height:0px; 
} 

DEMO

Answer 2

我会在jQuery的功能使用淡入

$(document).ready(function() { 

    // hide .navbar first 
    $(".navbar").hide(); 

    // fade in .navbar 
    $(function() { 
     $(window).scroll(function() { 
      // set distance user needs to scroll before we fadeIn navbar 
      if ($(this).scrollTop() > 100) { 
       $('.navbar').fadeIn().slideDown(); 
      } else { 
       $('.navbar').fadeOut().slideUp(); 
      } 
     }); 
    }); 
});