Tu peux fixer un bloc HTML avec un peu de code CSS, et ensuite détecter le moment quand le fixer avec JavaScript et l'élément scrollTop.
Pour fixer un bloc HTML à un moment du scroll, il faut :
- Créer une Class CSS pour fixer le bloc HTML en haut de l'écran.
- Utiliser ScrollTop pour détecter la position du scroll.
- Selon la position du scroll ajouter ou retirer la Class CSS.
Voici un exemple pour fixer un bloc HTML, initialement positionné à 600 pixels du haut de l'écran, tout en haut, lorsque le scroll est supérieur aux 600 pixels :
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style>
.exemple {
min-height: 5000px;
}
.test {
position: relative;
top: 600px;
}
.scroll {
position: fixed;
top: 0px;
}
</style>
</head>
<body>
<div class="exemple">
<div class="test" id="test">Bloc</div>
</div>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
var element = document.getElementById("test");
if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600)
{
element.classList.add("scroll");
}
else
{
element.classList.remove("scroll");
}
}
</script>
</body>
</html>
La valeur positionnée sur fixed dans la Class CSS scroll, pourrait être remplacée par sticky. Référez-vous à cette documentation Mozilla pour plus d'informations.
