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 !

Article chaud

<🎜>: Bubble Gum Simulator Infinity - Comment obtenir et utiliser les clés royales
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
<🎜>: Grow A Garden - Guide de mutation complet
3 Il y a quelques semaines By DDD
Nordhold: Système de fusion, expliqué
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers of the Witch Tree - Comment déverrouiller le grappin
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

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)

Sujets chauds

Tutoriel Java
1672
14
Tutoriel PHP
1276
29
Tutoriel C#
1256
24
Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisation Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisation Apr 16, 2025 am 12:12 AM

Python convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.

Javascript et le web: fonctionnalité de base et cas d'utilisation Javascript et le web: fonctionnalité de base et cas d'utilisation Apr 18, 2025 am 12:19 AM

Les principales utilisations de JavaScript dans le développement Web incluent l'interaction client, la vérification du formulaire et la communication asynchrone. 1) Mise à jour du contenu dynamique et interaction utilisateur via les opérations DOM; 2) La vérification du client est effectuée avant que l'utilisateur ne soumette les données pour améliorer l'expérience utilisateur; 3) La communication de rafraîchissement avec le serveur est réalisée via la technologie AJAX.

JavaScript en action: Exemples et projets du monde réel JavaScript en action: Exemples et projets du monde réel Apr 19, 2025 am 12:13 AM

L'application de JavaScript dans le monde réel comprend un développement frontal et back-end. 1) Afficher les applications frontales en créant une application de liste TODO, impliquant les opérations DOM et le traitement des événements. 2) Construisez RestulAPI via Node.js et Express pour démontrer les applications back-end.

Comprendre le moteur JavaScript: détails de l'implémentation Comprendre le moteur JavaScript: détails de l'implémentation Apr 17, 2025 am 12:05 AM

Comprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.

Python vs JavaScript: communauté, bibliothèques et ressources Python vs JavaScript: communauté, bibliothèques et ressources Apr 15, 2025 am 12:16 AM

Python et JavaScript ont leurs propres avantages et inconvénients en termes de communauté, de bibliothèques et de ressources. 1) La communauté Python est amicale et adaptée aux débutants, mais les ressources de développement frontal ne sont pas aussi riches que JavaScript. 2) Python est puissant dans les bibliothèques de science des données et d'apprentissage automatique, tandis que JavaScript est meilleur dans les bibliothèques et les cadres de développement frontaux. 3) Les deux ont des ressources d'apprentissage riches, mais Python convient pour commencer par des documents officiels, tandis que JavaScript est meilleur avec MDNWEBDOCS. Le choix doit être basé sur les besoins du projet et les intérêts personnels.

Python vs JavaScript: environnements et outils de développement Python vs JavaScript: environnements et outils de développement Apr 26, 2025 am 12:09 AM

Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.

Le rôle de C / C dans les interprètes et compilateurs JavaScript Le rôle de C / C dans les interprètes et compilateurs JavaScript Apr 20, 2025 am 12:01 AM

C et C jouent un rôle essentiel dans le moteur JavaScript, principalement utilisé pour implémenter des interprètes et des compilateurs JIT. 1) C est utilisé pour analyser le code source JavaScript et générer une arborescence de syntaxe abstraite. 2) C est responsable de la génération et de l'exécution de bytecode. 3) C met en œuvre le compilateur JIT, optimise et compile le code de point chaud à l'exécution et améliore considérablement l'efficacité d'exécution de JavaScript.

Des sites Web aux applications: les diverses applications de JavaScript Des sites Web aux applications: les diverses applications de JavaScript Apr 22, 2025 am 12:02 AM

JavaScript est largement utilisé dans les sites Web, les applications mobiles, les applications de bureau et la programmation côté serveur. 1) Dans le développement de sites Web, JavaScript exploite DOM avec HTML et CSS pour réaliser des effets dynamiques et prend en charge des cadres tels que JQuery et React. 2) Grâce à la réactnative et ionique, JavaScript est utilisé pour développer des applications mobiles multiplateformes. 3) Le cadre électronique permet à JavaScript de créer des applications de bureau. 4) Node.js permet à JavaScript d'exécuter le côté du serveur et prend en charge les demandes simultanées élevées.

See all articles