Sticky : une valeur pot de colle

Dernière mise à jour : février 2023

Introduction

La valeur sticky de la propriété position a été ajoutée à CSS Positioned Layout Module Level 3. Pour rappel, il existe plusieurs valeurs à cette propriété :

• - static (par défaut)
• - relative
• - absolute
• - fixed
• - sticky

On va seulement s'intéresser à cette dernière valeur : sticky. Partons sur l'idée que vous connaissez les autres valeurs. Dans la cas contraire, vous pouvez vous renseigner sur ces valeurs.

Le positionnement collant va permettre à un élément de rester visible pendant que l'utilisateur fait défiler la page ou le conteneur dans lequel se trouve l'élément collant, puis adopte une position fixe lorsque l'élément atteint une distance spécifique (en haut, bas, gauche ou droite) de la fenêtre de défilement.

Construire un menu collant :

Ci-dessous une mise en pratique de la valeur sticky sous forme de menu. Faites défiler le contenu via la barre (le scroll) sur le côté, vous constaterez alors que le menu reste collé en haut.

<ul class="sticky">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

*{margin:0;padding:0;box-sizing:border-box}

.sticky{

list-style-type: none;
background-color: #6753ea;
box-shadow: 0 10px 10px hsla(0, 0%, 26%, 0.2);
height:10vh;
position:sticky;
top:0;
display:flex;
align-items:center;
justify-content:center

}

    
.sticky li a{

color:#fff;
text-decoration:none;
padding:.3rem .5rem;

}

Voir le même exemple en JavaScript :

Empilement de contenu :

Un exemple qui "colle" parfaitement avec la valeur sticky : l'empilement.

<div class="cadre-sticky">
<h2>Titre</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>

<div class="cadre-sticky">
<h2>Titre</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>

<div class="cadre-sticky">
<h2>Titre</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>

<div class="cadre-sticky">
<h2>Titre</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>

<div class="cadre-sticky">
<h2>Titre</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>

<div class="cadre-sticky">
<h2>Titre</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>

<div class="cadre-sticky">
<h2>Titre</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>

*{margin:0;padding:0;box-sizing:border-box}

.cadre-sticky {


  top: 0;
  position: sticky;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  background-color: white;
  color: #333;
  padding: 40px;
  border-radius: 10px;
  margin-bottom: 20px;
}
	


.cadre-sticky:nth-child(1) {
  top: 20px;
}

.cadre-sticky:nth-child(2) {
  top: 40px;
}

.cadre-sticky:nth-child(3) {
  top: 60px;
}

.cadre-sticky:nth-child(4) {
  top: 80px;
}

.cadre-sticky:nth-child(5) {
  top: 100px;
}

.cadre-sticky:nth-child(6) {
  top: 120px;
}

.cadre-sticky:nth-child(7) {
  top: 140px;
}

.cadre-sticky:nth-child(8) {
  top: 160px;
}

Rétrécir un header collant sans JavaScript

<body
<header>
<div>
<h1>CSS shrink sticky header</h1>
</div>
</header>	
<main>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</main>

body {
	
background:black;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
color:white;
--hauteur:10vh	
}
	
	
a{color:currentcolor}

@media (prefers-reduced-motion: reduce) {
	header >*{
		animation: 0s;
	}
}
	
	
@supports (animation-timeline: scroll()) {
	


@keyframes shrink {
		
to {
height:calc(var(--hauteur)/2);
padding:1rem;
font-size: 2vmin ;
    }
  }

		
header >* {
height:var(--hauteur);
animation: shrink 1s;
animation-timeline: scroll();
display:flex;
font-size: 3vmin;
padding: 2rem;
  }
}


header {
	
background-color:#6753ea;
position: fixed;/*bug position sticky*/
top: 0;
right: 0;
left: 0;


}

	
h1 {

flex: 2;
text-align: center;
margin: 0;

	
}	

	
	
main {
	
max-width: 100ch;
margin: 10vh auto;
padding: 2rem;
	
}

p {

font-size: 1.25rem;
margin:4rem 0;
line-height: 2;
	
}

Source, inspiration, ressources :

Autre méthode sans animation

CSS sticky

Démo sur Jsfiddle en CSS .

Il est évident que si vous souhaitez utiliser la valeur sticky dans vos projets, le manque de compatibilité vous obligera à passer par un polyfill ^(EN) , et plus particulièrement stickyfill .