Q:

Bootstrap Navbar slide on scroll not smooth

I want my navbar to only show after scrolling. I've done that with JS but there's a "step" when it slides up or down. Here is the JS code :
$(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);
            }
        });
    });
});

And the JSfiddle : http://jsfiddle.net/3dcg2ygw/
How can I get it smooth ?

A:

The problem is that the navbar has a minimum height, try this in your code:
.navbar {
    height: 97px;
    background-color: #fff;
    overflow:hidden;
    min-height:0px;
}

DEMO

