Imaginez l’en-tête d’un site web qui est beau et large, avec beaucoup de padding en haut et en bas du contenu. En défilant vers le bas, il se rétrécit sur lui-même, réduisant une partie de ce padding, ce qui donne plus de place à l’écran pour d’autres contenus.
Normalement, vous devriez utiliser du JavaScript pour ajouter un effet de rétrécissement comme celui-là, mais il existe un moyen de le faire en utilisant uniquement du CSS depuis l’introduction de « position:sticky« .
Permettez-moi de faire connaître cette possibilité : je ne suis généralement pas un admirateur des en-têtes collants. Je pense qu’ils prennent trop de place sur l’écran. La question de savoir si vous devez ou non utiliser des en-têtes collants sur votre propre site est cependant différente. Cela dépend vraiment de votre contenu et de la valeur ajoutée qu’y apporte une navigation constante. Si vous l’utilisez, prenez bien soin d’éviter de recouvrir ou d’obscurcir par inadvertance le contenu ou les fonctionnalités avec les zones collantes – cela équivaut à une perte de données.
Quoi qu’il en soit, voici comment faire sans JavaScript, en commençant par le balisage. Rien de compliqué ici – un <header> avec un descendant <div> qui, en interne, contient le logo et la navigation.
<header class="header-outer">
<div class="header-inner">
<div class="header-logo">...</div>
<nav class="header-navigation">...</nav>
</div>
</header>
En ce qui concerne le style, nous allons déclarer une hauteur pour le parent <header> (120px) et le mettre en place comme un récipient flexible qui aligne son descendant au centre. Ensuite, nous le rendrons collant.
.header-outer {
display: flex;
align-items: center;
position: sticky;
height: 120px;
}
Le conteneur intérieur contient tous les éléments d’en-tête, tels que le logo et la navigation. Le conteneur interne est en quelque sorte le véritable en-tête, alors que la seule fonction de l’élément parent <header> est de rendre l’en-tête plus grand pour qu’il y ait quelque chose à réduire.
Nous allons donner à ce conteneur interne .header-inner une hauteur de 70px et le rendre également collant.
.header-inner {
height: 70px;
position: sticky;
top: 0;
}
Ce top : 0 ? Il est là pour s’assurer que le récipient se monte tout en haut lorsqu’il devient collant.
Et maintenant, le tour est joué ! Pour que le conteneur intérieur colle réellement au « plafond » de la page, nous devons donner au parent <header> une valeur de haut négative égale à la différence de hauteur entre les deux conteneurs, ce qui le fait coller « au-dessus » de la fenêtre. Cela fait 70px moins 120px, en partant avec – roulement de tambour, s’il vous plaît – -50px. Ajoutons cela.
.header-outer {
display: flex;
align-items: center;
position: sticky;
top: -50px; /* Equal to the height difference between header-outer and header-inner */
height: 120px;
}
Rassemblons tout cela maintenant. Le <header> glisse hors du cadre, tandis que le conteneur interne se place proprement en haut de la fenêtre de visualisation.
See the Pen Shrinking header on scroll without Javascript by AlfredDagenais (@AlfredDagenais) on CodePen.dark
Nous pouvons l’étendre à d’autres éléments ! Que diriez-vous d’une alerte permanente ?
See the Pen Sticky banner by AlfredDagenais (@AlfredDagenais) on CodePen.dark
Bien que ce soit assez génial de pouvoir faire cela en CSS, cela a ses limites. Par exemple, les conteneurs intérieurs et extérieurs utilisent des hauteurs fixes. Cela les rend vulnérables aux changements, comme si les éléments de navigation s’enroulent parce que le nombre d’éléments de menu dépasse l’espace disponible.
Une autre limitation ? Le logo ne peut pas rétrécir. C’est peut-être le plus gros inconvénient, car les logos sont souvent les plus grands responsables de l’encombrement. Peut-être qu’un jour nous pourrons appliquer des styles basés sur l’adhésivité d’un élément…
