How to create a hidden navbar with bootstrap that shows after you scroll?

Question

Can you tell me how I can create with bootstrap a navbar which is hidden and only shows after you start scrolling the page ?

Answer 1

Here's a variation where the navbar fades in and you can control how far users need to scroll before the navbar appears: http://jsfiddle.net/panchroma/nwV2r/

It should work on most elements, not just navbars.

Use your standard HTML

JS

(function ($) {
  $(document).ready(function(){

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

    // fade in .navbar
    $(function () {
        $(window).scroll(function () {

                 // set distance user needs to scroll before we start fadeIn
            if ($(this).scrollTop() > 100) {
                $('.navbar').fadeIn();
            } else {
                $('.navbar').fadeOut();
            }
        });
    });

});
  }(jQuery));