Comment créer : masquer le menu lors du défilement

Comment masquer la barre de navigation en glissant vers le bas

Première étape - Ajouter HTML :

Créer une barre de navigation :

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

Deuxième étape - Ajouter CSS :

Définir le style de la barre de navigation :

#navbar {
  fond de couleur : #333 ; /* Couleur de fond noire */
  position : fixe ; /* Le rend fixe/stick */
  haut : 0 ; /* Maintenu en haut */
  largeur : 100% ; /* Largeur complète */
  transition : top 0.3s; /* Effet de transition en glissant vers le bas (vers le haut) */
{}
/* Définir le style des liens de la barre de navigation */
#navbar a {
  flottant : à gauche;
  affichage : bloc;
  couleur : blanc;
  alignement de texte : centre;
  marge intérieure : 15px;
  style de décoration de texte : none;
{}
#navbar a:hover {
  fond de couleur : #ddd;
  couleur : noir;
{}

Troisième étape - Ajouter JavaScript :

/* 当用户向下滚动时，隐藏导航栏。当用户向上滚动时，显示导航栏。 */
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;
{}

Essayez-le vous-même