Je veux faire un atterrissage intégral avec une barre NAV transparente à l'aide de bootstrap4. Je veux une barre de navigation qui colle au sommet lorsque vous faites défiler vers le bas.
Quand j'utilise la classe 'Fixe-Top', il semble bien mais ne suit pas comme vous défilez. Lorsque j'utilise "Sticky-TOP", il rend l'arrière-plan la barre NAVBAR blanc. P>
.bg-dark{ background-color: transparent !important; }
4 Réponses :
J'ai fait comme ça
HTML P>
$(window).scroll(function () { console.log($(window).scrollTop()) if ($(window).scrollTop() > 63) { $('.navbar').addClass('navbar-fixed'); } if ($(window).scrollTop() < 64) { $('.navbar').removeClass('navbar-fixed'); } });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/> <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> <div class="container-fluid"> <a href="#" class="navbar-brand">Brand</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggler-1" aria-controls="navbarToggler-1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
Votre barre NAVBAR Obtenez la couleur d'arrière-plan de simplement supprimer la classe bg-sombre code>
bg-sombre code> à partir de
Vous pouvez supprimer cette classe (bg-sombre) lorsque c'est sur Sticky, il peut être effectué sur Thru JS ou si vous souhaitez utiliser uniquement des CSS, vous devez utiliser une classe de carrosserie avec BG-sombre comme ceci (corps .b- Dark {Fond: Aucun;} En-tête .bg-sombre {Fond: Aucun;}) Vous pouvez également y ajouter important si vous souhaitez ajouter cela.
p>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> <div class="container-fluid"> <a href="#" class="navbar-brand">Brand</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggler-1" aria-controls="navbarToggler-1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </nav> <div style="height:200px; width:100%; background:#f00; display:block;"></div> <div style="height:300px; width:100%; background:#000; display:block;"></div>