Wie erstellt man eine versteckte Navbar mit Bootstrap, die nach dem Scrollen angezeigt wird?

Question

Können Sie mir sagen, wie ich mit Bootstrap eine Navbar erstellen kann, die ausgeblendet ist und erst nach dem Scrollen der Seite angezeigt wird?

Answer 1

Hier ist eine Variante, bei der navbar in verblasst und Sie können steuern, wie weit Benutzer scrollen müssen, bevor die navbar erscheint: http://jsfiddle.net/panchroma/nwV2r/

Es sollte auf den meisten Elementen arbeitet, nicht nur NavBars.

Benutzen Sie Ihre 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)); 

Answer 2

Siehe Diese Website durchsuchen: 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

Diese Version mit gecached Element und dynamischen Scroll-Wert verbessert.

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

Diese Antwort wird Wegen der Scrollbar Art und Weise arbeiten, um es nach unten gehen wird verstecken und wenn die Bildlaufleiste nach oben wird es nicht in einem Punkt

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