Avec Bootstrap 4, comment puis-je faire disparaître la barre de navigation fixe lors du défilement? J'ai joint ci-dessous le code html de la barre de navigation Bootstrap 4 par défaut.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto py-md-2">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
3 Réponses :
En haut fixe oblige la navigation à rester fixe en haut de la fenêtre.
"Un élément avec la position: fixe; est positionné par rapport au fenêtre, ce qui signifie qu'il reste toujours au même endroit même si le la page défile. Les propriétés supérieure, droite, inférieure et gauche sont utilisées pour positionner l'élément. "
Les éléments HTML se déplacent nativement lorsque vous faites défiler vers le bas. Si vous souhaitez que la navigation défile avec le contenu, vous devez supprimer cette classe.
fixed-top garde la barre de navigation en haut du navigateur lors du défilement. Je veux le garder en haut mais je veux qu'il disparaisse en utilisant jquery après avoir fait défiler une certaine longueur vers le bas de la page
Réponse acceptée: stackoverflow.com/questions/21561480/...
Pour supprimer conditionnellement le positionnement fixe de la barre de navigation lorsque vous avez atteint un certain décalage (dans cet exemple, nous utiliserons 150 pixels à partir du haut de la fenêtre), vous pouvez faire:
$(window).on('scroll', function (e) {
$('.navbar').toggleClass('fixed-top', $(window).scrollTop() < 150);
})
Selon Le commentaire d'ajax333221 , toggleClass () pourrait également être utilisé:
$(window).on('scroll', function (e) {
$('.navbar')[$(window).scrollTop() >= 150 ? 'removeClass' : 'addClass']('fixed-top');
})
Merci, cela a fonctionné, mais comment puis-je le rendre moins saccadé et plus un fondu?
Voir l'exemple @joshmoto ici
peut-être que .toggleClass (className, state) pourrait être utilisé à la place: Une valeur booléenne (pas seulement véridique / falsifiée) pour déterminer si la classe doit être ajoutée ou supprimée.
@ ajax333221 mis à jour pour refléter votre suggestion. Merci!
Cue m'a battu aussi. Similaire à sa réponse mais n'utilisant pas de code court.
jQuery
// scroll functions
$(window).scroll(function(e) {
// add/remove class to navbar when scrolling to hide/show
$('.navbar')[$(window).scrollTop() >= 150 ? 'addClass' : 'removeClass']('navbar-hide');
});
Option de fondu de la barre de navigation CSS p>
Démo Codeply https://www.codeply.com/go/rTR1dcn4n6
.navbar {
transition: top 0.5s ease;
}
.navbar-hide {
top: -56px;
}
Option de glissement de la barre de navigation CSS vers le haut
Démo Codeply https://www.codeply.com/go/7Fab8Thufl
.navbar {
opacity: 1;
transition: opacity 0.5s ease;
}
.navbar-hide {
pointer-events: none;
opacity: 0;
}
La réponse de Cue est probablement beaucoup mieux si vous aimez moins de code, voici sa méthode ci-dessous en utilisant ma classe hide.
jQuery de Cue
// scroll functions
$(window).scroll(function(e) {
// add/remove class to navbar when scrolling to hide/show
var scroll = $(window).scrollTop();
if (scroll >= 150) {
$('.navbar').addClass("navbar-hide");
} else {
$('.navbar').removeClass("navbar-hide");
}
});
Option de fondu de la barre de navigation CSS (comme ci-dessus)
Démo Codeply https : //www.codeply.com/go/KPnx8ewEED
Option de glissement vers le haut de la barre de navigation CSS (comme ci-dessus)
Démo Codeply https://www.codeply.com/ go / i82vYBGeu7
C'est ce qui se passe lorsque vous élaborez autant que vous l'avez fait, mais je préfère de loin cette version visuellement fonctionnelle en toute honnêteté. Bon exemple.
@Cue merci mec, même si j'ai beaucoup appris de votre code. Je ne savais pas que vous pouviez utiliser des fonctions jQuery comme ça, malin!
comme le dit le dicton "chaque jour est un jour d'école"
Le but de "fixed" est de le maintenir en place lors du défilement. Alors pourquoi ne pas supprimer
fixed-topà la place?Je veux le garder fixe mais je veux qu'il disparaisse pendant le processus de défilement après un certain nombre de défilement. Par exemple, après 700 pixels en bas de la page, je veux que la barre de navigation disparaisse.