Éditeur Tryit de W3Schools

<!DOCTYPE html>
<html>
<head>
<style>
body {
marge: 0;
padding: 0;
taille de police: 28px;
}

h2, p {
marge: 10px;
}

ul {
list-style-type: none;
marge: 0;
padding: 0;
débordement: caché;
couleur de fond: #333333;
position: sticky;
haut: 0;
}

ul li {
flottant: gauche;
}

ul li a {
afficher: bloc;
couleur: blanc;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

ul li a:hover {
couleur-de-fond: #111111;
}

ul li a.active {
couleur de fond: #4CAF50;
}
</style>
</head>
<body>

<h2>Scroll Down</h2>
Faites défiler vers le bas pour voir l'effet collant.

<ul>
 <li><a class="active" href="#home">Accueil</a></li>
 <li><a href="#news">Nouvelles</a></li>
 <li><a href="#contact">Contact</a></li>
</ul>

La barre de navigation vabâtonvers le haut lorsque vous atteignez sa position de défilement.
Certaines textes pour activer le défilement. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Certaines textes pour activer le défilement. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Certaines textes pour activer le défilement. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Certaines textes pour activer le défilement. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Certaines textes pour activer le défilement. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Certaines textes pour activer le défilement. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Certaines textes pour activer le défilement. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

</body>

</html>