wake-up-neo.com

Wie erstelle ich eine versteckte Navbar mit Bootstrap, die nach dem Scrollen angezeigt wird?

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?

Hier ist eine Variante, bei der die Navbar eingeblendet wird und Sie steuern können, wie weit die Benutzer scrollen müssen, bevor die Navbar angezeigt wird: http://jsfiddle.net/panchroma/nwV2r/

Es sollte für die meisten Elemente funktionieren, nicht nur für Navbars.

Verwenden Sie Ihr 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));
48
David Taiaroa

Diese Website finden Sie unter: 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>

Dies ist eine verbesserte Version mit zwischengespeichertem Element und dynamischem Bildlaufwert. 

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

});
1
wanted70a

Diese Antwort wird funktionieren. Durch den Weg der Bildlaufleiste wird sie ausgeblendet, und wenn die Bildlaufleiste nach oben zeigt, wird sie nicht in einem Punkt angezeigt

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

Sie sollten diese Lösung auf dieser w3schools-Website finden. Sie brauchen keinen Bootstrap. Sie können dies nur mit CSS und Javascript tun.

0
Nyein