Catégories
Astuces et Design

Une barre latérale collante de taille dynamique avec HTML et CSS

Créer un contenu de page qui colle à la fenêtre lorsque vous faites défiler, quelque chose comme un menu de saut à l'ancre ou des en-têtes de section, n'a jamais été aussi simple. Jeter un position: sticky dans votre jeu de règles CSS, définissez le décalage directionnel (par exemple top: 0) et vous êtes prêt à impressionner vos coéquipiers avec un minimum d'effort. Consultez cet article CSS-Tricks pour voir de vrais cas d'utilisation de positionnement collant.

Mais le positionnement collant peut devenir un peu délicat, en particulier en ce qui concerne la hauteur et la situation dangereuse de cacher du contenu dans une position qui ne peut pas être défilée. Permettez-moi de préparer le terrain et de vous montrer le problème et comment je l'ai résolu.

J'ai récemment travaillé sur une mise en page de bureau que nous connaissons tous: une zone de contenu principale avec une barre latérale à côté. Cette barre latérale particulière contient des éléments d'action et des filtres pertinents pour le contenu principal. Au fur et à mesure que la section de page défile, ce composant reste fixé à la fenêtre et accessible contextuellement.

Le style de mise en page était aussi facile à mettre en œuvre que je l'avais mentionné plus tôt. Mais il y avait un hic: la hauteur du composant varierait en fonction de son contenu. J'aurais pu le coiffer d'un max-height Et mettre overflow-y: auto pour faire défiler le contenu du composant. Cela fonctionnait bien sur l'écran de mon ordinateur portable et ma hauteur de fenêtre typique, mais dans une fenêtre plus petite avec moins d'espace vertical, la hauteur de la barre latérale dépasserait la fenêtre.

C’est là que les choses se sont compliquées.

Penser à travers des solutions

J'ai d'abord envisagé de solliciter une requête média. Je pourrais peut-être utiliser une requête multimédia pour supprimer le positionnement collant et placer le composant par rapport au haut du conteneur de la barre latérale. Cela donnerait accès à l'intégralité de son contenu. Dans le cas contraire, lors du défilement de la page, le contenu du composant permanent est coupé en bas de la fenêtre jusqu'à ce que j'atteigne la fin de sa section parent.

Puis je me suis souvenu que la hauteur du composant collant est dynamique.

Quelle valeur magique pourrais-je utiliser pour ma requête multimédia pour gérer une telle chose? Peut-être pourrais-je plutôt écrire une fonction JavaScript pour vérifier si le composant dépasse les limites de la fenêtre lors du chargement de la page? Ensuite, je pourrais mettre à jour la hauteur du composant…

C'était une possibilité.

Mais que faire si l'utilisateur redimensionne sa fenêtre? Dois-je utiliser cette même fonction dans un gestionnaire d'événements de redimensionnement? Cela ne semble pas juste. Il doit y avoir une meilleure façon de construire cela.

Il s'est avéré que c'était le cas et cela impliquait une supercherie CSS pour faire le travail!

Configuration de la section de page

J'ai commencé avec un flex affichage sur l'élément principal. UNE flex-basis valeur a été définie sur la barre latérale pour une largeur de bureau fixe. Ensuite, l'élément article a rempli le reste de l'espace de la fenêtre horizontale disponible.

Si vous êtes curieux de savoir comment j'ai réussi à empiler les deux conteneurs pour des fenêtres plus petites sans requête multimédia, consultez l'astuce The Flexbox Holy Albatross.

J'ai ajouté align-self: start à la barre latérale afin que sa hauteur ne s'étire pas avec l'article principal (stretch est la valeur par défaut). Cela a donné à mes propriétés de positionnement la possibilité de lancer leur magie:

.sidebar {
  --offset: var(--space);
  /* ... */
  position: sticky;
  top: var(--offset);
}

Vérifiez cela! Avec ces deux propriétés CSS, l'élément de la barre latérale colle au haut de la fenêtre avec un décalage pour lui donner une certaine marge de manœuvre. Notez que le top value est défini sur une propriété personnalisée CSS étendue. le --offset La variable peut maintenant être réutilisée sur n'importe quel élément enfant dans la barre latérale. Cela sera utile plus tard lors du réglage de la hauteur maximale du composant de la barre latérale collante.

Vous pouvez trouver une liste de déclarations de variables CSS globales dans la démo CodePen, y compris le --space variable utilisée pour la valeur de décalage dans le :root ensemble de règles.

Gardez à l'esprit que le composant lui-même n'est pas ce qui est collant; c'est la barre latérale elle-même. La disposition générale et le positionnement doivent généralement être gérés par le parent. Cela donne au composant plus de flexibilité et le rend plus modulaire à utiliser dans d'autres domaines de l'application.

Plongeons-nous dans l’anatomie de ce composant. Dans la démo, j'ai supprimé les propriétés décoratives ci-dessous pour me concentrer sur les styles de mise en page:

.component {
  display: grid;
  grid-template-rows: auto 1fr auto;
}


.component .content {
  max-height: 500px;
  overflow-y: auto;
}
  • Ce composant utilise CSS Grid et l'idée de pile de crêpes des mises en page à 1 ligne pour configurer les lignes de ce modèle. L'en-tête et le pied de page (auto) s'adaptent à la taille de leurs enfants tandis que le contenu (1frou une unité de fraction) remplit le reste de l'espace vertical ouvert.
  • UNE max-height sur le contenu limite la croissance du composant sur des écrans de plus grande taille. Cela n’est pas nécessaire s’il est préférable que le composant s’étire pour remplir la hauteur de la fenêtre.
  • overflow-y: auto permet de faire défiler le contenu si nécessaire.

Lorsque le composant est utilisé dans la barre latérale, un max-height est nécessaire pour ne pas dépasser la hauteur de la fenêtre. le --offset précédemment portée au .sidebar La classe est doublée pour créer une marge en bas de l'élément qui correspond au décalage supérieur de la barre latérale collante:

.sidebar .component {
  max-height: calc(100vh - var(--offset) * 2);
}

Cela termine l'assemblage de ce composant collant de la barre latérale! Après l'application de certains styles décoratifs, ce prototype est devenu prêt pour les tests et les révisions. Essaie! Ouvrez la démo dans CodePen et cliquez sur les éléments de la grille pour les ajouter à la barre latérale. Redimensionnez la fenêtre de votre navigateur pour voir comment le composant s'adapte à la fenêtre tout en restant visible lorsque vous faites défiler la section de contenu principale.


Cette disposition peut bien fonctionner sur un navigateur de bureau, mais n’est pas tout à fait idéale pour les appareils plus petits ou les largeurs de fenêtre. Cependant, le code fourni ici fournit une base solide qui facilite l'ajout d'améliorations à l'interface utilisateur.

Une idée simple: un bouton peut être apposé sur la fenêtre de la fenêtre d'affichage qui, une fois cliqué, fait sauter la page vers le contenu de la barre latérale. Une autre idée: la barre latérale peut être masquée hors écran et un bouton bascule peut la faire glisser depuis la gauche ou la droite. L'itération et les tests utilisateurs aideront à conduire cette expérience dans la bonne direction.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *