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!

Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

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

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds











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.

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.

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 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 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.

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.

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.

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.
