Vous êtes ici : Accueil Blog > Articles > CSS

La valeur CSS sticky :

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.


Mise en pratique :

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!



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

}


Can I Use?

Voir le même exemple en JavaScript :


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

Votre navigateur est trop ancien pour afficher le contenu de ce site.