Cette technique efficace et puissante est beaucoup plus facile à réaliser que vous ne le pensez.

Dans la conception Web, un en-tête collant est un outil puissant qui améliore l'expérience utilisateur et la navigation. Lorsque les utilisateurs font défiler une page Web, un en-tête collant reste visible, garantissant que les liens de navigation essentiels sont toujours accessibles. Examinons les subtilités de la création d'un en-tête collant à l'aide de CSS.

À quoi sert un en-tête collant?

Un en-tête collant reste au même endroit sur une page Web, même lorsque l'utilisateur la fait défiler. Propriétés CSS spécifiques, principalement position: collante, vous aidera à atteindre ce comportement. Certains avantages d’avoir un en-tête collant incluent une expérience utilisateur améliorée et une navigation facile sur le site Web.

  • Les utilisateurs peuvent facilement accéder aux principaux liens de navigation sans faire défiler vers le haut.
  • Le logo ou le nom de la marque reste visible, renforçant ainsi l'identité de la marque.
    • instagram viewer
  • Un en-tête collant peut économiser de l'espace en supprimant la navigation dans la barre latérale, laissant plus de place au contenu.

Conception de l'en-tête: structure HTML

La base de tout en-tête collant est sa structure HTML. Voici comment créer les éléments HTML nécessaires pour votre en-tête collant.

<body>
<header>
<spanclass="logo">Company Logo 🏠span>
<nav>
<ul>
<li><ahref="#home">Homea>li>
<li><ahref="#about">Abouta>li>
<li><ahref="#services">Servicesa>li>
<li><ahref="#contact">Contacta>li>
ul>
nav>
header>
<mainid="home"><h1>Home pageh1>main>
<sectionid="about"><h1>Abouth1>section>
<sectionid="services"><h1>Servicesh1>section>
<sectionid="contact"><h1>Contacth1>section>
body>

Cette structure utilise un en-tête contenant le logo et un élément nav avec une liste non ordonnée de liens de navigation. Il utilise ensuite une balise principale et plusieurs balises de section pour représenter chaque section de la page. Pour le moment, la page ressemble à ceci :

Poser les bases avec CSS

Le code CSS ci-dessous utilise propriétés du modèle de boîte comme padding, margin et flexbox pour créer un design attrayant, avec une hauteur pour chaque section d'espace réservé.

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


main,
section { height: 100vh; }


.logo { font-size: 3rem; }


main,
header,
section {
display: flex;
align-items: center;
}


main { justify-content: center; }


header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb; 
}


navul {
display: flex;
column-gap: 2rem;
list-style: none;
}


a {
text-decoration: none;
font-size: 2rem;
color: #333;
}


section { justify-content: center; }


#home { background: #2c3e50; }


#about { background: #ccccff; }


#services { background: #f5b7b1; }


#contact { background: #40e0d0; }


h1 {
 font-size: 4rem;
 color: #fff;
}

La page devrait maintenant ressembler à ceci :

Implémentation de l'effet collant: CSS

Actuellement, lorsque vous faites défiler la page, vous remarquerez que l’en-tête quitte l’écran. Pour résoudre ce problème, utilisez la propriété CSS position et définissez l'en-tête sur collant.

Cette propriété se comporte comme une combinaison de positionnement relatif et fixe, en fonction de la position de défilement de l'utilisateur.

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}

Définir l’en-tête sur collant garantit qu’il reste à une position sur la page quel que soit le défilement. La propriété top spécifie où sur la page l'en-tête doit être placé. Maintenant, en faisant défiler la page, vous obtenez :

Résoudre les problèmes potentiels d’empilement

Parfois, d’autres éléments de la page peuvent chevaucher l’en-tête collant. Pour garantir que l'en-tête reste au premier plan, vous pouvez ajouter la propriété z-index :

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}

Enfin, ajoutez la propriété de défilement fluide à l'élément HTML pour une expérience utilisateur plus agréable :

html {
font-size: 62.5%;
scroll-behavior: smooth;
}

La page devrait maintenant défiler facilement entre les sections :

Améliorer la navigation Web avec les en-têtes CSS Sticky

L'ajout d'un en-tête collant à la conception de votre site Web peut grandement améliorer l'expérience utilisateur. Cette fonctionnalité maintient les utilisateurs connectés au menu principal, maintient une marque cohérente et donne à votre site Web un aspect moderne.

Grâce à la puissance du CSS, créer cet effet est simple et efficace. Les tendances en matière de conception Web changent avec le temps, mais l'en-tête collant est toujours utile pour différents secteurs.