Vanilla Javascript: Création du menu de navigation collante animée

Points de base

• Créer des menus de navigation animés animés sans le plug-in de jQuery. Le menu est conçu pour glisser hors de vue lors du défilement vers le bas et revenez en vue avec un effet translucide lors du défilement vers le haut.
• Ce processus consiste à configurer la structure HTML de base, à appliquer des styles aux éléments principaux, puis à animer le menu. L'animation est déclenchée en attachant le gestionnaire d'événements à l'événement de défilement et en utilisant la transformation CSS pour ajuster la position et l'apparence du menu en fonction de la direction de défilement.
• Cette solution de personnalisation offre plus de flexibilité de conception et permet de faire une personnalisation facile en fonction des besoins spécifiques. Le résultat final est un menu de navigation interactif dynamique qui améliore l'expérience utilisateur.

La conception des menus de navigation Web nécessite de considérer de nombreux facteurs, tels que l'emplacement du menu, le style et la conception réactive. Vous voudrez peut-être également ajouter des effets d'animation (juste bien, bien sûr). À ce stade, vous pouvez avoir tendance à utiliser le plugin jQuery pour effectuer la plupart du travail. Mais ce n'est pas nécessaire! Il ne faut que quelques lignes de code pour créer votre propre solution facilement.

Cet article montrera comment créer un menu de navigation collant animé en utilisant Pure JavaScript, CSS et HTML. Le produit final glissera vers le haut lorsque vous faites défiler la page et vous glissez en vue lorsque vous faites défiler (avec un effet translucide élégant). Cette technologie est utilisée par des sites Web bien connus tels que Medium et Hacker Noon.

Après la lecture, vous pourrez utiliser cette technologie dans votre conception, dans l'espoir d'obtenir de bons résultats. Il y a une démonstration à la fin de l'article pour que les lecteurs urgents se réfèrent.

Menu de navigation collante: structure HTML de base

Ce qui suit est le cadre de code HTML de base que nous utiliserons. Il n'y a rien d'excitant ici.

<div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">

      </div>
      <div class="nav">

      </div>
    </div>
  </div>

  <div class="content">

  </div>
</div>

Appliquer certains styles

Ajoutons quelques styles aux éléments principaux.

Contaiteur principal

Nous devons supprimer tous les styles de navigateur inhérents et régler la largeur du conteneur à 100%.

*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}

Banner Container

Il s'agit d'un emballage pour le menu de navigation. Il est toujours collant et glisse pour masquer ou afficher le menu de navigation lorsque vous faites défiler la page verticalement. Nous lui donnons une valeur z-index pour nous assurer qu'elle apparaît au-dessus du contenu.

.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}

Section de bannières

Cela contient le menu de navigation. Lorsque la page défile vers le haut ou vers le bas, le changement de position et la couleur d'arrière-plan est animé par la propriété de transition CSS.

.banner {
  height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}

partie de contenu

Cette section contiendra l'image et le texte d'arrière-plan. Nous ajouterons un effet de parallaxe à cette page plus tard dans cet article.

.content {
  background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
  background-size: cover;
  padding-top: 100%;
}

Animation du menu

Tout d'abord, nous devons attacher le gestionnaire d'événements à l'événement de défilement afin que le menu puisse être affiché et masqué en conséquence lorsque l'utilisateur défile. Nous avons également tout mis dans une seule ife pour éviter les conflits avec d'autres code exécutés sur la même longueur d'onde.

<div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">

      </div>
      <div class="nav">

      </div>
    </div>
  </div>

  <div class="content">

  </div>
</div>

Définissez certaines valeurs initiales

Nous utiliserons la variable RefoffSet pour indiquer la distance que l'utilisateur fait défiler vers le bas. Lorsque la page se charge, elle est initialisée à 0. Nous utiliserons la variable BannerHeight pour stocker la hauteur du menu et nécessiterons également des références aux éléments .banner-wrapper et .banner DOM.

*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}

Créer une direction de défilement

Ensuite, nous devons déterminer la direction de défilement afin que le menu puisse être affiché ou masqué en conséquence.

Nous commencerons par une variable appelée NewOffset. Lorsque la page se charge, cela sera défini sur la valeur de window.scrollY - le nombre de pixels Le document fait actuellement défiler verticalement (donc initialement 0). Lorsque l'utilisateur défile, NewOffset augmentera ou diminuera en conséquence. S'il est supérieur à la valeur stockée dans Bannerheight, alors nous savons que notre menu a été défilé hors de vue.

.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}

Le défilement vers le bas rendra NewOffset plus grand que Refoffset, et le menu de navigation doit glisser vers le haut et disparaître. Le défilement vers le haut rendra NewOffset plus petit que Refoffset, et le menu de navigation doit ramener en vue avec un effet translucide. Après cette comparaison, nous devons mettre à jour le Refoffset avec la valeur de NewOffset pour suivre la distance des défilements de l'utilisateur.

.banner {
  height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}

Animation du menu

Enfin, ajoutons quelques animations pour afficher et masquer le menu. Nous pouvons utiliser le CSS suivant pour y parvenir:

.content {
  background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
  background-size: cover;
  padding-top: 100%;
}

Nous devons également nous assurer qu'une fois que nous atteignons le haut de la page, l'effet translucide est supprimé du menu.

(() => {
  'use strict';

  const handler = () => {
    //DOM操作代码在此处
  };

  window.addEventListener('scroll', handler, false);
})();

Comme vous pouvez le voir, nous supprimons / appliquons différentes classes CSS en conséquence.

démo

Il s'agit d'une démo du menu de travail. (Le lien de démonstration Codepen doit être inséré ici, car je ne peux pas accéder au site Web externe, le lien réel ne peut pas être fourni)

Conclusion

Cet article décrit comment écrire quelques lignes de code à l'aide de Pure JavaScript (pas de jQuery requis) pour concevoir un menu de navigation animé. Lors du défilement vers le bas, le menu glissera; Cela se fait en surveillant la direction de défilement vertical et en appliquant la transformation CSS en élément DOM en cas de besoin. Cette solution personnalisée vous donne plus de liberté de concevoir facilement et de manière flexible en fonction de vos besoins et spécifications.

Vous voulez améliorer vos compétences en JavaScript? Veuillez consulter nos cours en train de démarrer avec JavaScript et JavaScript: Suivant.

Cet article a été évalué par des pairs par Vildan Softic. Merci à tous les pairs examinateurs de SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur!

(La section FAQ du menu de navigation collante d'animation JavaScript doit être incluse ici, et le contenu est cohérent avec le texte d'entrée. En raison des limitations de l'espace, il est omis ici.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!