par

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.

1 Réponse

+1 validé
par

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.

par

Tres bon tutoriel Merci.

Offre Sponsorisée

Ailleurs sur le Web

Lecture Recommandée

Edward Snowden - Mémoires vives

"Je m'appelle Edward Joseph Snowden. Avant, je travaillais pour le gouvernement mais aujourd'hui je suis au service de tous. Il m'a fallu près de trente ans pour saisir la différence et quand j'ai compris, ça m'a valu quelques ennuis au bureau."

L'homme qui a tout risqué pour dénoncer la surveillance globale, ou l'extraordinaire histoire d'un garçon brillant qui a grandi "en ligne", d'un homme devenu espion, puis lanceur d'alerte, et, en exil, la consciencce de l'internet.

Mémoires vives est un témoignage exceptionnel, également disponible en numérique.

Sujets Connexes

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...