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 ?

Dishcloth

It's clear that s/he's at least researched HTML and bootstrap. This is an answerable question. – Cornemuse

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

Escapism

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>

Cordage

This helped me. Thanks! – Kithara

Answer 3

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

Yahrzeit

Thank you so much! Exactly what I was looking for! – Dukedom

Answer 4

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

});

Interferometer

Answer 5

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>

Heartache