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

Answer 2

Refer this site: https://redvinestudio.com/how-to-make-a-menu-fade-in-on-scroll-using-jquery/

<script src="https://code.jquery.com/jquery-latest.js"></script>  <script type="text/javascript"> (function($) {               $(document).ready(function(){                             $(window).scroll(function(){                                       if ($(this).scrollTop() > 200) {                 $('#menu').fadeIn(500);             } else {                 $('#menu').fadeOut(500);             }         });     }); })(jQuery); </script>