Wie erstellen Sie eine versteckte Navigationsleiste mit bootstrap das zeigt nach beim scrollen?

Können Sie mir sagen, wie kann ich erstellen mit bootstrap eine navbar, die versteckt ist und nur zeigt nach dem start einen Bildlauf durch die Seite ?

Es ist klar, dass er/Sie mindestens recherchiert HTML und bootstrap. Dies ist eine Frage beantwortbar.

InformationsquelleAutor Valentin-Nicusor Barbu | 2014-04-26

  1. 48

    Hier ist eine Variante, wo der navbar eingeblendet und Sie können Steuern, wie weit der Benutzer scrollen zu müssen, bevor der navbar angezeigt: http://jsfiddle.net/panchroma/nwV2r/

    Sollte es auf die meisten Elemente, nicht nur die navbars.

    Verwenden Sie Ihren 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));

    InformationsquelleAutor David Taiaroa

  2. 3

    Siehe diese Seite:
    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>
    Das hat mir geholfen. Danke!

    InformationsquelleAutor Anuruddha Thennakoon

  3. 1

    Dies ist die verbesserte version mit Cache-element und die dynamic scroll-Wert. 

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

});

    InformationsquelleAutor wanted70a

  4. 0

    Sollten Sie feststellen, dass die Lösung auf diese w3schools-website. Sie nicht brauchen, bootstrap. Sie können es mit nur css und javascript.

    InformationsquelleAutor Nyein

Schreibe einen Kommentar