Table des matières
Contaiteur principal
Banner Container
Section de bannières
partie de contenu
Définissez certaines valeurs initiales
Créer une direction de défilement
Maison interface Web js tutoriel Vanilla Javascript: Création du menu de navigation collante animée

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

Feb 16, 2025 am 11:16 AM

Vanilla Javascript: Creating Animated Sticky Navigation Menu

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>
Copier après la connexion
Copier après la connexion

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%;
}
Copier après la connexion
Copier après la connexion

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%;
}
Copier après la connexion
Copier après la connexion

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;
}
Copier après la connexion
Copier après la connexion

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%;
}
Copier après la connexion
Copier après la connexion

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>
Copier après la connexion
Copier après la connexion

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%;
}
Copier après la connexion
Copier après la connexion

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%;
}
Copier après la connexion
Copier après la connexion

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;
}
Copier après la connexion
Copier après la connexion

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%;
}
Copier après la connexion
Copier après la connexion

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);
})();
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Apr 04, 2025 pm 02:42 PM

Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

Démystifier javascript: ce qu'il fait et pourquoi c'est important Démystifier javascript: ce qu'il fait et pourquoi c'est important Apr 09, 2025 am 12:07 AM

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Qui est payé plus de python ou de javascript? Qui est payé plus de python ou de javascript? Apr 04, 2025 am 12:09 AM

Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

JavaScript est-il difficile à apprendre? JavaScript est-il difficile à apprendre? Apr 03, 2025 am 12:20 AM

Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.

Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido? ou: Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Apr 04, 2025 pm 05:36 PM

La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...

L'évolution de JavaScript: tendances actuelles et perspectives d'avenir L'évolution de JavaScript: tendances actuelles et perspectives d'avenir Apr 10, 2025 am 09:33 AM

Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Apr 04, 2025 pm 05:09 PM

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...

La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? Apr 04, 2025 pm 05:12 PM

Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...

See all articles