Le positionnement d’éléments en sticky est souvent mal compris et mal appliqué.
Cela peut entraîner des problèmes de mise en page où les éléments censés être fixes continuent de défiler, créant des frustrations.
Cet article explore l’utilisation correcte du sticky en Tailwind CSS, en abordant les erreurs communes et les limitations pour optimiser vos designs.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
Utiliser le positionnement sticky Tailwind CSS
Toujours avec les positionnements, nous allons voir comment positionner un élément de manière sticky avec Tailwind CSS. Pour cela, on utilise la classe sticky , combinée avec les classes top , left , right , ou bottom pour définir l’emplacement exact où l’élément devient fixe lors du défilement.
Reprenons notre exemple précédent, mais cette fois-ci nous allons ajouter un header . Le but est simple, on devrait avoir une bannière pour notre header avec la barre de navigation juste au-dessous de celui-ci. Quand on va commencer à défiler, nous allons fixer la barre de navigation avec la classe sticky . Voilà comment nous allons procéder :
- Code :
<header class="h-40 bg-yellow-300 text-gray-800 text-center pt-10">
Ceci est une bannière
</header>
<nav class="bg-blue-500 px-6 py-3 sticky top-0 w-screen">
<ul class="flex justify-between text-white pr-80">
<li>Home</li>
<li>Welcome !</li>
<li>About us</li>
</ul>
</nav>
<article>
<p class="pt-20 px-80">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti pariatur voluptatum eius velit porro repellat ut iste voluptate vel dolorum animi amet necessitatibus fuga totam ipsa, a nostrum commodi obcaecati!
Molestias omnis sunt vel natus dignissimos molestiae, enim ea voluptatum, voluptates quo delectus mollitia excepturi perferendis asperiores soluta repellat facere dolorum pariatur deserunt quas in illo animi voluptatibus! Facilis, voluptatibus.
Eligendi eum nisi aliquid accusantium laboriosam magnam omnis distinctio, quam, consequuntur minus incidunt illum dolorem iste quisquam quibusdam, pariatur quos est porro odio in consectetur sunt ab beatae possimus. Animi?
At, ratione fugiat dolores hic quaerat odio possimus incidunt recusandae, rerum error quam veniam doloribus quae molestias repellendus vel. Fuga id quisquam optio nulla officia maxime non dicta hic excepturi.
Molestiae porro quis adipisci laudantium quae obcaecati aliquam, numquam et, excepturi quidem commodi rem placeat tempore? Est itaque adipisci deleniti doloribus, asperiores repudiandae ratione quo ex doloremque pariatur nesciunt quam.
Expedita velit facere dignissimos provident placeat. Ex temporibus voluptatum ratione deserunt saepe? Nihil nemo voluptatibus quo optio iste ad, sunt obcaecati sequi vero veritatis perferendis iure ipsum assumenda numquam earum.
Quasi vitae delectus fugiat ducimus odio ipsa labore? Aperiam ullam id doloremque laudantium quod velit numquam nisi commodi, dolores quaerat ipsam, similique quasi maiores facilis? Sit animi voluptatum maiores aliquid?
Dolores doloribus nisi earum voluptates aperiam error veniam quae culpa sunt blanditiis minus, aliquid iusto dolorem nostrum, beatae optio est cupiditate? Delectus suscipit qui soluta perspiciatis sint dicta ipsum vitae.
Dignissimos aperiam odit quas voluptas asperiores nostrum, quae id. Fugit est nemo cumque quis tenetur, accusantium facilis nobis, sed nulla voluptatibus, doloremque dolore! Porro quod amet, illum veniam id minus.
Dicta, esse nobis nemo accusamus odit fuga expedita sequi sint dolore, dolorum in labore quibusdam quaerat quam voluptatum tempore eligendi ducimus illo mollitia iste! Adipisci inventore rem atque repellendus quasi?</p>
</article>
- Résultat :
Limites et erreurs du sticky Tailwind CSS
Afin que vous puissiez intégrer sans problème un élément sticky dans vos projets, j’ai ici quelques points que j’aimerais aborder avec vous.
- Comportement dans des conteneurs overflow
Une des limitations les plus fréquentes avec sticky est liée à l’utilisation de la propriété CSS overflow . Si un élément parent a un overflow défini comme scroll , hidden , ou auto , l’élément sticky ne se collera qu’à l’intérieur de ce parent et non à la fenêtre du navigateur.
En reprenant l’exemple avant, puis en regroupant l’article et la barre de navigation dans une balise <div> où il y aura la classe overflow.
<div class="overflow-auto">
<nav class="bg-blue-500 px-6 py-3 sticky top-0 w-screen">
<ul class="flex justify-between text-white pr-80">
<li>Home</li>
<li>Welcome !</li>
<li>About us</li>
</ul>
</nav>
<article>
<p class="pt-20 px-80px">Lorem ipsum…</p>
</article>
</div>
Dans cet exemple, la barre de navigation ne deviendra pas collante par rapport à la fenêtre, mais seulement à l’intérieur du conteneur ayant un overflow-auto . Cela peut poser problème si l’objectif est d’avoir un élément qui reste visible même en dehors du conteneur.
- Dépendance à la hauteur du parent
Un élément avec sticky se colle normalement à la fenêtre tant que son parent est plus grand que la hauteur de la fenêtre du navigateur . Donc si le parent de l’élément sticky est plus petit que la zone de défilement, l’effet sticky ne fonctionnera pas comme attendu. L’élément ne restera pas fixé, car il n’aura pas suffisamment d’espace pour se « coller » à l’intérieur du parent.
- Code :
<div class="relative h-20">
<nav class="bg-blue-500 px-6 py-3 sticky top-0 w-screen">
<ul class="flex justify-between text-white pr-80">
<li>Home</li>
<li>Welcome !</li>
<li>About us</li>
</ul>
</nav>
</div>
<article>
<p class="pt-20 px-80">Lorem ipsum…p>
</article>
- Résultat :
Là encore, l’effet sticky s’est cassé, car le conteneur parent est trop petit (h-20), l’élément sticky n’aura pas suffisamment de hauteur pour que l’effet de « collage » se produise correctement. Il est donc important de s’assurer que l’élément parent a une hauteur suffisante pour permettre l’effet sticky.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment utiliser la classe sticky avec Tailwind CSS?
Quels sont les pièges courants à éviter avec le sticky?
Quelles sont les limitations des éléments sticky?
Comment le sticky se comporte-t-il dans des conteneurs overflow?
Pourquoi l'effet sticky ne fonctionne-t-il pas comme prévu?
Conclusion
En somme, le positionnement sticky avec Tailwind CSS est un outil puissant mais nécessite une attention particulière aux détails pour être efficace. Quelle autre méthode de positionnement CSS pourriez-vous explorer pour améliorer vos projets?
