Le header qui colle

🎯 Objectif

Faire ce que font tous les sites que tu consultes : garder l'en-tête visible pendant que la page défile. Deux lignes, et pas une de moins.

📖 Exemple

Le tournoi d'échecs du collège affiche ses appariements sous une bannière collante. La fenêtre ci-dessous est petite et la liste est longue : fais-la défiler, la bannière rose se bloque en haut et reste là.

<p class="banniere">Tournoi d'échecs du collège</p>
<h4>Ronde 1</h4>
<p>Léa – Noah · table 1</p>
<p>Sam – Inès · table 2</p>
<p>Maël – Zoé · table 3</p>
<h4>Ronde 2</h4>
<p>Léa – Sam · table 1</p>
<p>Noah – Zoé · table 2</p>
<p>Inès – Maël · table 3</p>
<h4>Ronde 3</h4>
<p>Léa – Zoé · table 1</p>
<p>Sam – Maël · table 2</p>
<p>Noah – Inès · table 3</p>

body {
    margin: 0;
    background-color: #ffffff;
}

h4,
p {
    margin: 8px 16px;
}

.banniere {
    position: sticky;
    top: 0;
    margin: 0;
    padding: 12px 16px;
    background-color: #d45e95;
    font-weight: bold;
}

Pourquoi deux déclarations ? La valeur sticky mène une double vie : tant que le défilement ne l'a pas atteinte, la bannière vit dans le flux et pousse ses voisins comme n'importe quel bloc ; dès que le défilement veut la faire sortir par le haut, elle se fige contre le bord. Sa cousine fixed, elle, arrache l'élément du flux dès la première seconde — les voisins se referment sur sa place et l'en-tête recouvre le début du contenu. Quant à top, c'est le point d'accroche : il répond à une question que le navigateur ne peut pas deviner — à quelle distance du bord s'arrêter ? Sans lui, sticky est posé mais ne colle nulle part, sans le moindre message d'erreur.

💡 sticky ne colle que dans son parent : dès que le conteneur sort de l'écran, l'élément s'en va avec lui. C'est comme ça que l'application de contacts de ton téléphone garde chaque lettre affichée le temps de sa section.

📝 Consigne

Fais défiler l'aperçu jusqu'au dimanche : l'en-tête doré de Rock'Air a disparu. Même mécanique que la bannière du tournoi — ajoute deux déclarations à la règle .entete, dans l'onglet CSS :

1. La valeur de position qui laisse l'en-tête dans le flux tant qu'on ne défile pas, puis le colle au bord dès que le défilement l'atteint — pas celle qui l'arrache tout de suite.
2. Son point d'accroche : top à zéro, pile contre le bord du haut.

Puis refais défiler le programme, un œil sur le haut de l'aperçu.