Comment faire fonctionner les liens d’ancrage avec un en-tête collant (sticky) ?
Facile à mettre en œuvre, apprécié par les clients et utile lorsqu’un site contient beaucoup de contenu, l’en-tête collant (sticky header) est devenu un élément incontournable de nos sites Web.
Néanmoins, il existe un problème auquel nous pouvons être confrontés si nous utilisons sur notre site un en-tête collant et des liens d’ancrage.
Les liens d’ancrage permettent aux utilisateurs d’accéder instantanément à un endroit précis de la même page ou à une section spécifique d’une autre page. Par défaut, la section ciblée s’aligne en haut de la fenêtre. Toutefois, si un site dispose d’un en-tête fixe, une partie du contenu de la section peut être masquée par cet en-tête :
Dans cet article, nous allons voir comment corriger ce problème, nous allons nous assurer que l’en-tête collant et les liens d’ancrage fonctionnent bien ensemble.
Section intitulée comment-faisions-nous-avantComment faisions-nous avant ?
Dans le passé, il y a eu toutes sortes d’astuces, plus ou moins propres, pour contourner ce problème. Une approche courante consistait à appliquer une marge négative supérieure et une hauteur au pseudo-élément. Nous constatons encore son utilisation dans certains projets récents :
<header class="header">
<nav>
<ul>
<li><a href="#section-one">Menu link</a></li>
<li><a href="#section-two">Menu link</a></li>
</ul>
</nav>
</header>
<section id="section-one" class="section">
<h2 class="title">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</h2>
</section>
<section id="section-two" class="section">
<h2 class="title">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</h2>
</section>
h2::before {
display: block;
margin-top: -30rem;
height: 30rem;
visibility: hidden;
pointer-events: none;
content: ' ';
}
Heureusement, depuis quelques années, nous n’avons plus besoin d’utiliser ce genre d’astuce, car une nouvelle solution est disponible et elle tient en une seule ligne de code.
Section intitulée la-propriete-css-code-scroll-margin-top-codeLa propriété CSS scroll-margin-top
scroll-margin-top: <value>;
La propriété CSS scroll-margin-top permet de définir la marge supérieure de l’élément ciblé par un lien que le navigateur utilisera lors du défilement.
Les unités suivantes peuvent être utilisées : px, em, rem, vh, %, etc., ainsi que la valeur auto (dans ce cas, le navigateur peut spécifier une marge de défilement, mais elle correspond généralement à 0px) :
<header class="header">
<nav>
<ul>
<li><a href="#section-one">Menu link</a></li>
<li><a href="#section-two">Menu link</a></li>
</ul>
</nav>
</header>
<section id="section-one" class="section">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
</section>
<section id="section-two" class="section">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
</section>
:root {
--header-height: 10rem;
}
.header {
position: sticky;
top: 0;
z-index: 100;
height: var(--header-height);
}
.section {
scroll-margin-top: calc(var(--header-height) + 4rem);
}
À présent, lorsqu’un lien d’ancrage est activé, le navigateur se déplace vers la section ciblée en lui attribuant une marge supérieure de 14rem. La section est donc espacée de 4rem de l’en-tête, lequel mesure 10rem en hauteur. Cela garantit sa pleine visibilité.
Section intitulée la-propriete-css-code-scroll-padding-top-codeLa propriété CSS scroll-padding-top
scroll-padding-top: <value>;
Il existe une méthode alternative qui peut être plus adaptée à certains projets. Elle consiste à utiliser scroll-padding-top directement sur l’élément <html> :
<header class="header">
<nav>
<ul>
<li><a href="#section-one">Menu link</a></li>
<li><a href="#section-two">Menu link</a></li>
</ul>
</nav>
</header>
<section id="section-one" class="section">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
</section>
<section id="section-two" class="section">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
</section>
:root {
--header-height: 10rem;
}
html {
scroll-padding-top: calc(var(--header-height) + 4rem);
}
.header {
position: sticky;
top: 0;
z-index: 100;
height: var(--header-height);
}
Le résultat final de l’utilisation de la propriété scroll-padding-top est exactement le même que celui de l’utilisation de scroll-margin-top. La section ciblée, éloignée du haut de la fenêtre par un espace supplémentaire, est entièrement visible.
Il est important de souligner que ces deux propriétés CSS ne modifient la marge que dans le cas d’un défilement. Ils n’ont donc pas d’impact sur les marges « normales » de l’élément.
Section intitulée bonus-la-propriete-css-code-scroll-behavior-smooth-codeBonus : la propriété CSS scroll-behavior: smooth
J’aimerais mentionner une autre déclaration CSS qui améliore l’expérience de défilement d’un site Web.
scroll-behavior: smooth;
Cette déclaration CSS contrôle le comportement de défilement de la page web, sauf si l’utilisateur fait défiler la page manuellement. Elle rend le défilement fluide et animé, plutôt que brusque. Elle peut être appliquée à l’ensemble du contenu de la page ou à des éléments spécifiques.
html {
scroll-behavior: smooth;
}
Section intitulée conclusionConclusion
La prise en charge de ces trois propriétés CSS par les navigateurs modernes est excellente, comme indiqué sur le site Can I Use. Par conséquent, nous pouvons les appliquer immédiatement sur nos sites Web sans craindre d’effets indésirables.
Commentaires et discussions
Nos formations sur ce sujet
Notre expertise est aussi disponible sous forme de formations professionnelles !
CSS avancé
Mettre en forme des pages web en offrant des possibilités de personnalisation poussées
Ces clients ont profité de notre expertise
Refonte complète de la plateforme d’annonces immobilières de Cushman & Wakefield France. Connecté aux outils historiques, cette nouvelle vitrine permet une bien meilleure visibilité SEO et permet la mise en avant d’actifs qui ne pouvaient pas l’être auparavant.
Nous avons entrepris une refonte complète du site, initialement développé sur Drupal, dans le but de le consolider et de jeter les bases d’un avenir solide en adoptant Symfony. La plateforme est hautement sophistiquée et propose une pléthore de fonctionnalités, telles que la gestion des abonnements avec Stripe et Paypal, une API pour l’application…
L’équipe d’Alain Afflelou a choisi JoliCode comme référent technique pour le développement de son nouveau site internet. Ce site web-to-store incarne l’image premium de l’enseigne, met en valeur les collections et offre aux clients de nouvelles expériences et fonctionnalités telles que l’e-réservation, le store locator, le click & collect et l’essayage…