Créer du contenu Sticky
Parfois il est nécessaire de faire défiler du contenu au scroll de l’utilisateur.
Je vais vous montrer comment le faire sans qu’il déborde de son container.
Comment créer du contenu Sticky ?
Nous allons utiliser Bootstrap pour créer deux colonnes à l’intérieur d’une div.
<div>
<div class="col-lg-3 col-sm-12">
<div>
Contenu Sticky
</div>
</div>
<div class="col-lg-9 col-sm-12">
Contenu de l'article
</div>
</div>
Nous allons ajouter des classes.
La class .div-wrapper ajoute un “display:flex“, ce qui met toutes les colonnes à la même hauteur ( Pratique pour du contenu dynamique comme des articles ).
La class .sticky ajoute une “position:sticky” et un “top: 30px;“
En utilisant la position:sticky, il est possible de contrôler la position verticale et horizontale du contenu en utilisant “top”, “bottom”, “left” et “right”.
<div class="div-wrapper">
<div class="col-lg-3 col-sm-12">
<div class="sticky">
Contenu Sticky
</div>
</div>
<div class="col-lg-9 col-sm-12">
Contenu de l'article
</div>
</div>
Un peu de CSS
.div-wrapper {
display:flex;
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: 30px;
}
Si vous n’avez pas de contenu dans la colonne de droite, n’hésitez pas à rajouter une hauteur minimum afin de tester votre contenu sticky.
<div class="div-wrapper">
<div class="col-lg-3 col-sm-12">
<div class="sticky">
Contenu Sticky
</div>
</div>
<div class="col-lg-9 col-sm-12" style="min-height:500px;">
Contenu de l'article
</div>
</div>