21

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

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Valentin-Nicusor Barbu
  • 347
  • 1
  • 3
  • 9

5 Answers5

53

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));
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
4

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>
Anuruddha Thennakoon
  • 457
  • 7
  • 20
2

You should find that solution on this w3schools website. You do not need bootstrap. You can do it with only css and javascript.

Nyein
  • 276
  • 3
  • 11
1

This is improved version with cached element and dynamic scroll value. 

$(document).ready(function(){
    var $nav = $('.nav');//Caching element
    // hide .navbar first - you can also do this in css .nav{display:none;}
    $nav.hide();

    // fade in .navbar
    $(function () {
        $(window).scroll(function () {
            // set distance user needs to scroll before we start fadeIn
            if ($(this).scrollTop() > 100) { //For dynamic effect use $nav.height() instead of '100'
                $nav.fadeIn();
            } else {
                $nav.fadeOut();
            }
        });
    });

});
wanted70a
  • 11
  • 2
0

This answer will work Because of the scrollbar way to go down it will hide and if the scrollbar up it will show not in one point

//The variable takes the value of the new position each time
var scrollp=0;
    (function ($) {
        $(document).ready(function(){
            $(function () {
                $(window).scroll(function () {
                // ask about the position of scroll 

                    if ($(this).scrollTop() < scrollp) {
                        $('.navbar').fadeIn();
                        scrollp= $(this).scrollTop();
                    } else {
                        $('.navbar').fadeOut();
                        scrollp= $(this).scrollTop();
                    }
                });
            });

        });
    }(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
محمد الوهاشي
  • 9
  • 1