Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

sticky : une valeur pot de colle
Vous ĂȘtes ici : Accueil Blog > Articles > CSS
Sommaire de l'article
  1. Introduction
  2. Construire un menu collant
  3. Empilement de contenu
  4. Rétrécir un header collant sans JavaScript
  5. Aller plus loin

DerniĂšre mise Ă  jour de l'article : mars 2021

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é :

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, blanditiis, aspernatur, veniam consequatur ut laboriosam in at nisi voluptas voluptatibus repellat tempora molestiae hic dolore autem quam assumenda pariatur amet!

Code :

HTML


<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>


CSS


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

.sticky {
background-color:#7d68e8;
box-shadow:0 5px 10px hsl(0, 0%, 26%);
height:10vh;
line-height:10vh;
position:sticky;
top:0;
display:flex;
align-items:center;
justify-content:center
}
    
.sticky li{

padding: 3px;
list-style: none

}
    
.sticky li a{

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

}

.contenu{

margin: auto;
width: 80%

}

.contenu p{

text-align: justify;
color: rgba(0,0,0,.3);
line-height: 1.6

}


Voir le mĂȘme exemple en JavaScript :

Empilement de contenu :

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

Titre

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!

Titre

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!

Titre

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!

Titre

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!

Titre

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!

Titre

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!

Titre

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!

Rétrécir un header collant sans JavaScript

Code :

HTML


<body
<header>
<div>
<svg></svg>
<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>


CSS


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: works) {
	
	
@scroll-timeline scroll-header {

time-range: 1s;
  }

@keyframes shrink {
		
to {
height:calc(var(--hauteur)/2);
padding:1rem;
font-size: calc(.25vw + 1em);
    }
  }

		
header >* {
height:var(--hauteur);
animation: shrink 1s both;
animation-timeline: scroll-header;
display:flex;
font-size: calc(.5vw + 1em);
padding: 2rem;
  }
}

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


}

	
h1 {

flex:2;
display:grid;
place-items:center;
margin: 0;

	
}	

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

p {

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

Autre méthode sans animation

Support navigateurs :

CSS sticky

Source, inspiration, ressources :

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 .

Vous rencontrez un problĂšme avec cet article ?

Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.

haut page