web-dev-qa-db-fra.com

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

Pouvez-vous me dire comment créer avec bootstrap une barre de navigation qui est masquée et ne s'affiche que lorsque vous avez commencé à faire défiler la page?

twitter-bootstrapnavbarhidden
17
Valentin-Nicusor Barbu

Voici une variante dans laquelle la barre de navigation apparaît en fondu et vous pouvez contrôler la distance que les utilisateurs doivent faire défiler avant qu'elle n'apparaisse: http://jsfiddle.net/panchroma/nwV2r/

Cela devrait fonctionner sur la plupart des éléments, pas seulement sur les barres de navigation.

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

Reportez-vous à 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>
3
Anuruddha Thennakoon

Ceci est une version améliorée avec élément en cache et 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();
            }
        });
    });

});
1
wanted70a

Cette réponse fonctionnera En raison de la façon dont la barre de défilement, il sera caché et si la barre de défilement vers le haut apparaît, il affichera Pas en 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>

0
محمد الوهاشي

Vous devriez trouver cette solution sur ce site Web w3schools . Vous n'avez pas besoin de bootstrap. Vous pouvez le faire avec seulement css et javascript.

0
Nyein