Come creare una barra di navigazione nascosta con bootstrap che viene visualizzata dopo lo scorrimento?

Question

Puoi dirmi come posso creare con bootstrap una barra di navigazione che è nascosta e mostra solo dopo aver iniziato a scorrere la pagina?

Answer 1

Ecco una variante in cui la barra di navigazione svanisce in ed è possibile controllare come gli utenti hanno bisogno di gran lunga scorrere prima che appaia la barra di navigazione: http://jsfiddle.net/panchroma/nwV2r/

Dovrebbe funzionare sulla maggior parte degli elementi, non solo NavBars.

Usa il tuo codice HTML standard

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

consultare questo sito: 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

Questa è migliorata versione con elemento di cache e il valore di scorrimento dinamico.

$(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 4

Questa risposta funzionerà A causa del modo barra di scorrimento per andare verso il basso si nasconde e se la barra di scorrimento fino mostrerà non in 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>