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>