twitter bootstrap - tamaño - ¿Cómo crear una barra de navegación oculta con bootstrap que se muestra después de desplazarte?

panel con imagen en bootstrap

Question

¿Puede decirme cómo puedo crear con bootstrap una barra de navegación que está oculta y solo se muestra después de comenzar a desplazar la página?

Answer 1

Aquí hay una variación en la que la barra de navegación se desvanece y puede controlar hasta qué punto los usuarios deben desplazarse antes de que aparezca la barra de navegación: http://jsfiddle.net/panchroma/nwV2r/

Debería funcionar en la mayoría de los elementos, no solo en las barras de navegación.

Usa tu HTML estándar

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

Consulte este sitio: 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>

Answer 3

Debe encontrar esa solución en este sitio web de w3schools . No necesitas bootstrap. Puedes hacerlo solo con css y javascript.

Answer 4

Esta es una versión mejorada con elemento en caché y valor de desplazamiento dinámico.

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

});

Answer 5

Esta respuesta funcionará Debido a la forma en que se mueve la barra de desplazamiento, se ocultará y si la barra de desplazamiento hacia arriba no se mostrará en un punto

//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>