Création d'une barre de navigation intelligente avec Javascript Vanilla

La navigation collante ou fixe est un choix de conception populaire car il donne aux utilisateurs un accès persistant pour naviguer sur le site. D'un autre côté, il prend de la place sur la page et couvre parfois le contenu est un moyen moins qu'attrayant.

Une solution possible? Navigation intelligente.

Définissons la «navigation intelligente» comme:

1. Visible en haut de la page
2. Visible lorsque l'utilisateur monte sur la page (partout où il peut avoir fait défiler)
3. Caché lorsque l'utilisateur descend la page

Voici un exemple de la façon dont cela pourrait fonctionner:

C'est toute la commodité du positionnement collant, avec un avantage complet supplémentaire. Ce type de navigation intelligente est déjà couramment (pensez à la barre d'URL dans de nombreux navigateurs mobiles), mais est parfois un problème à implémenter sans bibliothèque ni plugin. Donc, dans cet article, nous discuterons de la façon d'en créer un en utilisant CSS et Vanilla JavaScript.

Remarque latérale: les gens ont des définitions différentes de ce que signifie faire défiler une page (imaginez comment certaines préférences de trackpad font défiler la page lorsque vous déplacez vos doigts vers le bas ). Aux fins de cet article, le défilement vers le bas fait référence à se déplacer vers le bas de la page.

Regardons le code

Voici quelques exemples de HTML. Notre navigation intelligente sera le qui se trouve au-dessus du :

 <nav>
  <div>
    Logo
  </div>
  <div>
    <a href="#"> lien 1 </a>
    <a href="#"> lien 2 </a>
    <a href="#"> lien 3 </a>
    <a href="#"> lien 4 </a>
  </div>
 nav>
<main>
  
-main></main></nav>

Il est important de noter que les éléments ne sont que collants par rapport à leur conteneur parent . Le conteneur parent de devrait être la balise corporelle; Il ne devrait pas être placé dans une autre balise de la page.

Le CSS pour notre navigation intelligente ressemble à ceci:

 nav {
  Position: collante;
  en haut: 0;
  Affichage: flex;
  wrap flex: enveloppement;
  justifier-contenu: espace-intermédiaire;
  rembourrage: 1.5rem 2rem;
  Color en arrière-plan: #eaea;
}

Nous devons maintenant détecter quand notre utilisateur fait défiler la page et la direction de leur défilement. Un utilisateur fait défiler vers le bas si la valeur de sa dernière position de défilement est inférieure à la valeur de sa position de défilement actuelle. Rompant la logique, nous devrons:

1. Définir une variable pour stocker la position de défilement précédente
2. Attribuez une variable pour détecter la position de défilement actuelle définie sur le décalage de défilement de la page

Si la position de défilement actuelle est supérieure à la position de défilement précédente, l'utilisateur fait défiler vers le bas. Appelons notre fonction Isscrollingdown:

 Laissez PREVERSCROLLPOSITION = 0;

const isscrollingdown = () => {
  Soit CurrentCrolledPosition = Window.Scrolly || window.pageyoffset;
  Laissez le défilement;

  if (CurrentScrolledPosition> précédente) {
    Scrollingdown = true;
  } autre {
    Scrollingdown = false;
  }
  PREMÉSCROLLPOSITION = CURRENTSCROLLEDPOSITION;
  retour de défilement;
};

Voici une représentation visuelle du fonctionnement de cette fonction:

Avec cette logique, nous sommes en mesure de détecter quand la page fait défiler vers le bas afin que nous puissions l'utiliser pour basculer notre style de navigation:

 const NAV = document.QuerySelector ('nav');

const handlenavscroll = () => {
  if (isscrollingdown ()) {
    nav.classlist.add ('scroll-down');
    nav.classlist.remove ('scroll-up')
  } autre {
    nav.classlist.add («scroll-up»);
    nav.classlist.remove ('Scroll-Down')
  }
}

Si l'utilisateur fait défiler vers le bas, nous attribuerons une classe. Nous pouvons mettre à jour notre

CSS à ceci:

 nav {
  / * style par défaut * /
  Transition: 500 ms supérieurs facilité-ou-out;
}

nav.scroll-up {
  en haut: 0;
}

nav.scroll-down {
  Top: -100%;
}

Avec ce style, la valeur de propriété supérieure de

est définie sur -100% de la hauteur de la page afin qu'elle glisse hors de vue. Nous pourrions également choisir de gérer notre style avec Traduction ou en le décollant - quelle que soit l'animation, la meilleure animation fonctionne le mieux.

Performance

Chaque fois que nous travaillons avec des auditeurs d'événements Scroll, les performances sont quelque chose qui devrait immédiatement vous venir à l'esprit. À l'heure actuelle, nous appelons notre fonction à chaque fois que l'utilisateur fait défiler la page, mais nous n'avons pas besoin de détecter chaque mouvement de pixel.

Pour ce cas, nous pouvons plutôt implémenter une fonction d'accélérateur. Une fonction de papillon est une fonction d'ordre supérieur qui agit comme un minuteur pour la fonction qui y est adoptée. Si nous étranglons un événement de défilement avec une minuterie de 250 ms, l'événement ne sera appelé que toutes les 250 ms pendant que l'utilisateur défile. C'est un excellent moyen de limiter le nombre de fois que nous appelons la fonction, aidant aux performances de la page.

David Corbacho approfondit les implémentations de l'accélérateur dans cet article.

Une simple implémentation d'accélérateur dans JavaScript ressemble à ceci:

 // Initialiser une variable d'étalonnage
var throttlewait;

const throttle = (rappel, temps) => {
  // Si la variable est vraie, n'exécutez pas la fonction
  if (throttlewait) retour;

  // Définissez la variable d'attente sur true pour suspendre la fonction
  throttlewait = true;

  // Utilisez setTimeout pour exécuter la fonction dans le délai spécifié
  setTimeout (() => {
    callback ();

    // Définit Throttlewait sur FALS
    throttlewait = false;
  }, temps);
}

Ensuite, nous pouvons inclure notre fonction Handlenavavscroll à l'intérieur d'un accélérateur:

 window.addeventListener ("Scroll", () => {
  Accélération (handlenavscroll, 250)
});

Avec cette implémentation, la fonction HandLenavscroll n'est appelée qu'une fois toutes les 250 ms.

Accessibilité

Chaque fois que la mise en œuvre d'une fonctionnalité personnalisée dans JavaScript, nous devons toujours prendre l'accessibilité. Un tel problème est de s'assurer que est visible lorsqu'il est mis au point. Les navigateurs ont tendance à faire défiler la partie de la page qui a actuellement la mise au point par défaut, mais il peut y avoir certaines complications lorsque vous travaillez avec des événements de défilement.

Un moyen de s'assurer que est toujours visible est de mettre à jour le CSS pour tenir compte de la mise au point. Maintenant, notre CSS ressemble à ceci:

 nav.scroll-up,
nav: focus-within {
  en haut: 0;
}

Malheureusement, le sélecteur de mise au point, n'est pas entièrement pris en charge dans tous les navigateurs. Nous pouvons inclure une seigne JavaScript pour cela:

 const handlenavscroll = () => {
  if (isscrollingdown () &&! Nav.Contains (document.activeElement))) {
    nav.classlist.add ('scroll-down');
    nav.classlist.remove ('scroll-up')
  } autre {
    nav.classlist.add («scroll-up»);
    nav.classlist.remove ('Scroll-Down')
  }
}

Dans cette fonction mise à jour, nous appliquons la classe de défilement unique que si l'utilisateur fait défiler la page et que le n'a actuellement aucun élément qui se concentre.

Un autre aspect de l'accessibilité est la considération que certains utilisateurs peuvent ne pas vouloir avoir d'animation sur la page. C'est quelque chose que nous pouvons détecter et respecter avec la requête média CSS Media en mouvement préfabriqué. Nous pouvons mettre à jour cette méthode dans JavaScript et empêcher notre fonction de s'exécuter si un utilisateur préfère le mouvement réduit:

 const MediaQuery = Window.matchMedia ("(préfère la mouvement réduit: réduire)");

window.addeventListener ("Scroll", () => {
  if (MediaQuery &&! mediaquery.matches) {
    Accélération (handlenavscroll, 250)
  }
});

Emballage

Donc, là, nous l'avons: une implémentation de navigation intelligente avec CSS simple et JavaScript Vanilla. Désormais, les utilisateurs ont un accès persistant pour naviguer sur le site sans perdre l'immobilier d'une manière qui bloque le contenu.

De plus, le bénéfice d'une implémentation personnalisée comme celui-ci est que nous obtenons une délicieuse expérience utilisateur qui n'est pas sur-conçue ou qui sacrifie les performances ou l'accessibilité ouvertes.

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!