Comment fixer un bloc HTML à un moment du scroll ?
Je cherche comment fixer un bloc HTML à un moment précis du scroll de la page.
J'ai une balise DIV qui par défaut est positionnée à 600px du haut de la page. Je voudrais que lorsque l'utilisateur scroll la page et arrive à ce bloc HTML, celui-ci se fixe et reste toujours en haut de page, et ce même si l'utilisateur continue le scroll.
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.