Positionnement en adhérence (sticky) CSS38

Publié le par Julien Crego
Mise à jour le

Plusieurs petits exercices consistant à tester les principes du positionnement adhérent sticky en CSS en reproduisant des modèles.

Pour rappel, le positionnement en adhérence ou sticky consiste à positionner un élément HTML de manière relative jusqu’à un seuil de défilement définit à partir duquel l’élément se positionne en fixe. Ce positionnement s’effectue avec les propriétés display, top, bottom, left et right.

Deux points à retenir lorsqu’un élément est positionné en absolu :

  • Le positionnement sticky démarre par rapport au seuil fourni.
  • Le positionnement sticky s’effectue par rapport à la position du conteneur englobant.

Préparation de l’exercice

Créez un dossier racine à l’emplacement de votre choix.

Créez un fichier html intitulé position-css37.html avec la structure de base.

Afficher la solution

Solution :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Titre de la page</title>
	</head>
	<body>

	</body>
</html>

Créez un fichier css intitulé  style.css et liez-le à la page position-css38.html.

Afficher la solution

Solution :

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire.

<link  rel="stylesheet" type="text/css" href="style.css">

Exercice 1 : Bandeau de titre

HTML : Ajoutez suffisamment de contenu dans la page pour quelle puisse défiler. Pour cela, utiliser du lorem ipsum : Lorem Ipsum

HTML : Insérez deux éléments div en haut de la page avec les classes site-img et site-title. Ajoutez le texte “Titre du site” dans le second élément site-title.

Exercice 1 - Aperçu 1
Afficher la solution

Solution :

<div class="site-img"></div>
<div class="site-title">Titre du site</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam, massa sit amet egestas sollicitudin, ex dolor euismod lorem, a posuere ligula lorem ut risus. Nulla consectetur pharetra ex, eget ullamcorper lacus faucibus maximus.</p>

CSS : Utilisez la classe site-img pour dimensionner l’élément afin qu’il ait une hauteur de 300px.

Exercice 1 - Aperçu 2
Afficher la solution CSS

Solution CSS :

.site-img {
  height: 300px;
}

CSS : Insérez une image en arrière-plan de l’élément site-img en faisant en sorte qu’elle occupe tout le bloc.

Exercice 1 - Aperçu 3
Afficher la solution CSS

Solution CSS :

.site-img {
  height: 300px;
  background: url('https://source.unsplash.com/WLUHO9A_xik/1600x900') no-repeat;
  background-position: center ;
  background-size: cover;
}

CSS : Effectuez la mise en forme de l’élément site-title afin qu’il corresponde au modèle ci-dessous. La couleur d’arrière-plan est opaque à 50%.

Exercice 1 - Aperçu 4
Afficher la solution CSS

Solution CSS :

.site-title {
  background-color: rgba(50,50,50,0.5);
  color: #fff;
  min-height:50px;
  line-height: 50px;
  padding-left: 10px;
}

Testez le défilement de la page.

CSS : Positionnez l’élément site-title afin qu’il soit en adhérence lorsqu’il est positionné à 0 du haut de la fenêtre.

Afficher la solution CSS

Solution CSS :

.site-title {
  background-color: rgba(50,50,50,0.5);
  color: #fff;
  min-height:50px;
  line-height: 50px;
  padding-left: 10px;
  position: sticky;
  top: 0px;
}

Testez à nouveau le défilement de la page.

Edit

Prévisualiser(ouvre un nouvel onglet)

Exercice 2 : Liste d’articles

Créez une nouvelle page HTML à laquelle vous liez votre fichier css.

HTML : Insérez un conteneur principal de type article contenant un titre de niveau 1 et une dizaine de paragraphes contenant chacun plusieurs lignes de Lorem Ipsum : Lorem Ipsum. Vous devez avoir suffisamment de contenu pour que la page puisse défiler.

Afficher la solution HTML

Solution HTML :

<article>
  <h1>Lorem Ipsum</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam, massa sit amet egestas sollicitudin, ex dolor euismod lorem, a posuere ligula lorem ut risus. Nulla consectetur pharetra ex, eget ullamcorper lacus faucibus maximus. Suspendisse volutpat, erat eget convallis efficitur, lacus ipsum porttitor augue, quis laoreet diam nisi eu ante. Suspendisse at ipsum nibh. Sed elementum viverra ex, semper pretium ante ullamcorper id. Quisque eget mattis mauris. Etiam maximus diam et sapien gravida, vel tempus lorem ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam dapibus commodo dictum. Ut malesuada massa elit. Vivamus ac porta lectus, blandit consectetur enim.</p>
  <p>....</p>
</article>

HTML : Dupliquez plusieurs fois l’élément article afin d’avoir plusieurs articles les uns à la suite des autres.

CSS : Mettez en forme les articles afin de bien les distinguer comme dans l’exemple ci-dessous :

Exercice 2 - Aperçu
Afficher la solution CSS

Solution CSS :

article {
  margin: 2rem;
  padding: 1rem;
  border: 1px solid #333;
  background-color: #eee;
}
h1 {
  background-color: #333;
  padding:1rem;
  color: #fff;
}

CSS : Positionnez les titre afin d’obtenir un résulta identique à la démonstration suivante lors du défilement de la page.

Edit
Afficher la solution CSS

Solution CSS :

h1 {
  background-color: #333;
  padding:1rem;
  color: #fff;
  position: sticky;
  top: 20px;
}

Exercice 3 : Relevé bancaire

Téléchargez la page HTML de base permettant d’effectuer l’exercice ci-dessous :

Fichiers de travail

Observez-bien le code HTML fourni avant de reproduire la code CSS permettant d’obtenir le résultat de la démonstration ci-dessous lors du défilement de la page.

Edit
Afficher la solution CSS

Solution CSS :

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {
  font-family: Roboto, sans-serif;
  background-color: #27576a;
}
.account {
  max-width: 500px;
  margin: 0 auto;
}
.account h1 {
  margin:0;
  padding: 0.5rem;
  background-color: #0d3548;
  color: #fff;
  font-size: 2rem;
  text-align: center;
  position: sticky;
  top:0;
  z-index:2;
}
.account h2 {
  margin:0;
  padding: 0.5rem;
  background-color: #4f7a8f;
  text-align: center;
  position: sticky;
  top:3rem;
}
.month div {
  background-color: #c7e1ed;
}
.month div:nth-of-type(2n) {
  background-color: #fff;
}
.io {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem;
}
.io span:nth-of-type(1){
  flex-basis: 70px;
  text-align: center;
}
.io span:nth-of-type(2){
  flex-basis: calc(100% - 170px);
}
.io span:nth-of-type(3){
  flex-basis: 100px;
  text-align: right;
}
.io span:nth-of-type(3)::after {
  content: ' €';
}
.debit span:nth-of-type(3){
  color: #c90c00;
}

Exercice 4 : Carré bleu

Créez une nouvelle page HTML à laquelle vous liez le fichier css.

HTML : Insérer le code HTML suivant dans votre page web.

<div class="container">
  <div class="content">
  </div>
</div>

CSS : Effectuez la mise en place des deux éléments pour avoir l’élément container beaucoup plus petit que l’élément content. Gérez le débordement de container pour afficher des poignées de scroll.

Aperçu exo 4
Afficher la solution CSS

Solution CSS :

.container {
  max-width: 500px;
  margin: 1rem auto;
  height: 400px;
  border: 3x solid red;
  overflow: scroll;
}
.content {
  width: 2000px;
  height: 1200px;
  background-color: #ccc;
}

HTML : Insérez un élément HTML supplémentaire dans l’élément content.

Afficher la solution HTML

Solution HTML :

<div class="container">
  <div class="content">
    <div class="square"></div>
  </div>
</div>

CSS : Transformez en petit carré de couleur (30x30px) l’élément que vous venez de rajouter.

Afficher la solution CSS

Solution CSS :

.square {
  width: 30px;
  height: 30px;
  background-color: blue;
}

CSS : Transformez content en élément flexible afin de centrer le carré à l’intérieur verticalement et horizontalement.

Afficher la solution CSS

Solution CSS :

.content {
  width: 2000px;
  height: 1200px;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS : Positionnez le carré pour obtenir le comportement illustré par la démonstration ci-dessous lors du scroll.

Edit
Afficher la solution CSS

Solution CSS :

.square {
  width: 30px;
  height: 30px;
  background-color: blue;
  position: sticky;
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
}

Sauf mention contraire*, l'article Positionnement en adhérence (sticky) [CSS38] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.