Comment - Masquer le menu sur le défilement
Apprenez à masquer un menu de navigation lors d'un défilement vers le bas avec CSS et JavaScript.
Comment masquer la barre de navigation lors du défilement vers le bas
Étape 1) Ajoutez du HTML :
Créez une barre de navigation :
Exemple
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
Étape 2) Ajoutez CSS :
Stylisez la barre de navigation :
Exemple
#navbar {
background-color: #333; /* Black background
color */
position: fixed; /* Make it stick/fixed
*/
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar
a:hover {
background-color: #ddd;
color: black;
}
Étape 3) Ajoutez JavaScript :
Exemple
/* When the user scrolls down, hide the navbar. When the user scrolls up, show
the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll =
function() {
var currentScrollPos = window.pageYOffset;
if
(prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}