Share
Dans ce didacticiel, nous allons apprendre à créer un motif visible sur de nombreux sites Web: un en-tête fixe qui passe à un état moins gênant lorsque nous faisons défiler la page. Nous allons commencer par la structure de base, puis faire fonctionner les choses en utilisant CSS et JavaScript pur. Avant de terminer, nous verrons brièvement comment nous pouvons optimiser notre code et discutons des difficultés rencontrées lors de l’application de ce type de motif aux dispositifs tactiles..
Pour avoir une idée de ce que nous allons construire, voici la démo (vous préférerez peut-être une vue plein écran):
Nous allons commencer cet exercice avec l'en-tête de balisage suivant, contenant un et quelques autres éléments imbriqués:
le nav element, qui fait partie de l'en-tête, contient trois éléments; le logo, le menu principal et un bouton d'espace réservé pour déclencher un menu réactif (inférieur à 1061 pixels).
Remarque: Si vous cliquez sur ce bouton, rien ne se passera. La création du menu réactif dépasse le cadre de ce didacticiel..
Voyons maintenant quelques styles CSS pour faire bouger les choses:
header position: fixed; en haut: 0; largeur: 100%; rembourrage: 20px; taille de la boîte: boîte-frontière; arrière-plan: # DD3543; nav display: flex; align-items: extrémité flexible; justifier-contenu: espace-entre; transition: align-items .2s; .logo font-size: 2rem; affichage: inline-block; rembourrage: 20px 30px; arrière-plan: # F35B66; couleur: #fff; marge: 50px 0 0 50px; transition: tous .2s; ul display: flex; marge: 50px 50px 0 0; rembourrage: 0; transition: marge .2s; li: not (: last-child) margin-right: 20px; li a display: block; rembourrage: 10px 20px; .toggle-menu display: none; taille de police: 2rem; couleur: #fff; marge: 10px 10px 0 0; transition: marge .2s; main display: block; rembourrage: 0 20px;
Voici une brève explication des règles les plus importantes ici:
Accentsconagua
entête élément est un élément fixe.nav élément.marge supérieure: 50px et marge gauche: 50px. De plus, nous lui donnons rembourrage: 20px 30px.marge supérieure: 50px et marge droite: 50px.transition propriété aux éléments dont les valeurs de propriété changeront à l'avenir. De cette manière, nous obtenons un effet de transition en douceur entre l'état initial et l'état final. Avec ces règles en place, l'en-tête ressemble à ceci:
Jusqu'à présent, nous avons construit la structure de base de notre en-tête. Il est maintenant temps de discuter des prochaines étapes:
principale L'élément doit être placé juste en dessous de l'en-tête. Rappelez-vous que l'en-tête a positionné: fixe, et il est donc placé au sommet de la principale élément. Pour résoudre la première tâche, nous ajoutons un rembourrage propriété à la principale élément. La valeur de cette propriété doit être égale à la hauteur de l'en-tête. Dans notre cas, nous n’avons pas spécifié de hauteur fixe pour notre en-tête, nous allons donc utiliser du JavaScript pour le calculer, puis ajouter le remplissage correspondant à la valeur. principale élément.
Pour résoudre la deuxième tâche, procédez comme suit:
faire défiler classe à l'en-tête.Voici le code JavaScript requis - nous commençons par définir quelques variables, en calculant la hauteur du entête, puis en ajoutant cette valeur comme rembourrage au principale élément:
var m = document.querySelector ("main"), h = document.querySelector ("en-tête"), hHeight; fonction setTopPadding () hHeight = h.offsetHeight; m.style.paddingTop = hHeight + "px"; Pour cette démonstration, nous utilisons le offsetHeight propriété pour récupérer la hauteur de l'en-tête. N'oubliez pas que nous aurions également pu utiliser le getBoundingClientRect () méthode. Il est à noter que cette méthode peut renvoyer des valeurs fractionnaires.
Passons maintenant à l'événement de défilement:
fonction onScroll () window.addEventListener ("scroll", callbackFunc); function callbackFunc () var y = window.pageYOffset; if (y> 150) h.classList.add ("scroll"); else h.classList.remove ("scroll"); Nous profitons ici de la fenêtre pageYOffset propriété pour calculer le nombre de pixels que notre document a fait défiler verticalement. Notez que cette propriété ne fonctionne pas dans les anciennes versions de IE (< 9). However, if you want to support any of these versions, a workaround is available here.
Ensuite, nous utilisons le classList propriété pour ajouter et supprimer le faire défiler classe de notre en-tête. Cependant, tous les navigateurs ne prennent pas en charge cette propriété. Par conséquent, si vous souhaitez prendre en charge l'une de ces options, vous pouvez consulter les polyfill classList.js et classie.js. Pour cet exemple, nous aurions pu utiliser le nom du cours propriété pour manipuler notre classe unique, mais dans un scénario réel, cela pourrait ne pas être la solution idéale (dans le cas où nous avons plusieurs classes).
Pour conclure, nous appelons nos fonctions dans deux cas différents:
window.onload = function () setTopPadding (); onScroll (); ; window.onresize = function () setTopPadding (); ;
Tant que notre défilement dépasse la limite de 150px, quelques règles CSS supplémentaires sont appliquées:
.scroll box-shadow: 0 7px 0 0 rgba (0, 0, 0, .1); .scroll .logo padding: 10px 20px; taille de la police: 1.5rem; .scroll nav align-items: center; .scroll .logo, .scroll ul, .scroll .toggle-menu margin: 0;
Plus précisément, nous apportons les modifications suivantes:
Les règles susmentionnées génèrent cette nouvelle disposition d'en-tête:
Comme nous l'avons mentionné dans une section précédente, lorsque la largeur de la fenêtre d'affichage est inférieure à 1061 pixels, nous masquons le menu et affichons le bouton de lien réactif (qui ne fait rien en réalité). De plus, nous apportons quelques autres changements dans les éléments cibles.
Ci-dessous, vous pouvez voir l'apparence initiale de l'en-tête responsive:
Voici les règles CSS associées:
Écran @média et (largeur maximale: 1060 pixels) en-tête remplissage: 10 pixels; nav align-items: center; ul display: none; .logo font-size: 1.8rem; marge: 10px 0 0 10px; .toggle-menu display: block;
Et voici l'apparence de l'en-tête une fois qu'il a été animé:
Maintenant que nous avons réussi à donner à notre en-tête le comportement souhaité, allons un peu plus loin et discutons de quelques points concernant les performances.
Dans notre exemple, le code qui manipule l’animation de l’en-tête (c.-à-d.. callbackFunc) est exécuté lorsque le faire défiler événements d'incendie. Cela signifie qu'il peut être déclenché des centaines de fois ou plus. Cela peut entraîner des problèmes de performances, en particulier lorsque le callbackFunc Cette fonction contient beaucoup de choses à faire lorsque nous faisons défiler la page. Dans notre cas spécifique, il s’agit d’une simple animation, mais imaginons un scénario réel dans lequel nous souhaitons réaliser des tâches plus complexes, telles que le repositionnement d’éléments, etc..
Alors, que pouvons-nous faire à ce sujet? Eh bien, il y a beaucoup solutions possibles, mais pour l'instant, examinons brièvement l'une d'entre elles. Plus précisément, nous voulons permettre à notre fonction d'être exécutée au plus une fois toutes les 200 millisecondes (il s'agit d'une valeur arbitraire). Pour mettre en œuvre cette fonctionnalité, nous allons tirer parti de Lodash, une bibliothèque d’utilitaires JavaScript moderne. Cette bibliothèque fournit la fonction d'accélération dont nous avons besoin.
Premièrement, nous incluons la bibliothèque (heureusement il y a aussi la possibilité de n'incorporer que la fonction désirée) dans notre projet, puis nous remplaçons ce code:
window.addEventListener ("scroll", callbackFunc);
avec ça:
window.addEventListener ("scroll", _.throttle (callbackFunc, 200));
Pour comprendre la différence, faisons un test simple. Nous allons initialiser un compteur qui est incrémenté à chaque fois que le callbackFunc la fonction est déclenchée.
Maintenant, essayez de faire défiler la page. Vous remarquerez alors que la valeur du compteur change environ toutes les 200 ms. Ensuite, répétez ce processus sans pour autant en utilisant Lodash. Vous remarquerez que la valeur du compteur change beaucoup plus rapidement.
Encore une fois, bien que cette optimisation semble inutile pour notre exemple simple, vous devez en tenir compte lorsque vous traitez des tâches coûteuses et répétitives..
De la même manière, nous aurions pu optimiser la redimensionner écouteur d'événement.
Cet effet fonctionne dans la plupart des navigateurs et des appareils récents. Toutefois, l’expérience n’est pas idéale sur tous les appareils mobiles (par exemple, les appareils iOS). Cela se produit parce que le faire défiler event se comporte différemment sur les navigateurs de bureau par rapport aux appareils mobiles. Par exemple, sur un navigateur de bureau, le faire défiler Un événement se déclenche continuellement, alors que sur un iPad, il survient lorsque vous faites glisser votre doigt.
Connaissant les problèmes ci-dessus, vous devez décider si vous souhaitez ou non utiliser ce modèle sur vos pages Web..
Dans ce tutoriel, nous avons créé un en-tête fixe qui est animé lorsque nous faisons défiler la page. J'espère que vous avez aimé la démo et que vous l'utiliserez comme source d'inspiration dans vos projets à venir!
