Comment créer une barre de navigation cachée avec bootstrap qui s'affiche après le défilement?

Question

Pouvez-vous me dire comment je peux créer avec bootstrap une barre de navigation qui est cachée et ne s'affiche qu'après avoir commencé à faire défiler la page?

Answer 1

est ici une variante où la barre de navigation disparaît et vous pouvez contrôler la façon dont les utilisateurs distants ont besoin pour faire défiler avant la barre de navigation apparaît: http://jsfiddle.net/panchroma/nwV2r/

Il devrait fonctionner sur la plupart des éléments, non seulement NavBars.

Utilisez votre 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

Référer ce 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> 

Answer 3

Cette version améliorée est avec l'élément mis en cache et la valeur de défilement dynamique.

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

Cette réponse fonctionnera En raison de la façon dont la barre de défilement pour aller vers le bas, il va se cacher et si la barre de défilement, il affiche son pas un 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>