Détecter le scroll vertical

**boteha** · 20/06/2017, 21h52

Bonjour,

Pour un effet sticky je cherche un code javascript le plus léger possible pour détecter le scroll vertical et appliquer alors un changement de position à certains éléments et de display à d'autres.

Je précise que je connais très peu javascript.

Merci d'avance.

**NoSmoking** · 21/06/2017, 19h40

Bonjour,
il te faut mettre un « écouteur » sur l'événement onscroll de ton document et agir en conséquence.

GlobalEventHandlers.onscroll.

**boteha** · 21/06/2017, 19h58

Bonjour,

Merci de ta réponse mais je me suis mal exprimé.

Je veux détecter le scrool vertical et au-delà d'une certaine valeur, par exemple 200 pixels, appliquer des changements CSS à divers éléments de la page.

Dans ton lien je ne vois pas comment faire pour :

if (scrool_vertical > 200px)

**danielhagnoul** · 21/06/2017, 23h17

Voir scrollTop : https://developer.mozilla.org/fr/doc...ment/scrollTop

**boteha** · 22/06/2017, 13h00

Bonjour,

Merci.

je vais étudier cela.

**boteha** · 23/06/2017, 19h33

Bonjour,

Je ne suis pas sûr que scrollTop soit adapté et je ne sais pas comment le mettre en place.

Par contre il me semble que ma question n'est pas originale.

Palier les limites de Position sticky en CSS et avoir un effet sticky via javascript, il me semble que des dizaines de sites le font déjà.

J'aimerais juste trouver le morceau de code javascript que je sais pas programmer, il me semble que c'est répandu.

if (scrool_vertical > 200px)
Je passe un élément de "position : absolute" à "position : fixed"
Je passe un autre élément en "display : none"

**ProgElecT** · 23/06/2017, 20h06

Salut

Cela fait 3 mois que je me suis mis au JavaScript, j'avais copier/coller/modifier ce bout de code pour apprendre.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>
.test1 {
    background-color: lightblue;
}
.test2 {
    background-color: yellow;
}
.test3 {
    background-color: red;
}
</style>
</head>
<body style="height:1500px; width:1800px">
 
<p>Faites défiler cette page de haut en bas ainsi que de droite à gauche</p>
 
<div id="myP" style="position:fixed">
<p id="mesures">.</p>
<p> Lorsque vous avez parcouru 50 pixels du haut de cette page, ajouter la classe "test" (Couleur de fond jaune) a ce paragraphe.
	<br> Faites défiler vers le haut pour supprimer la classe.
</p>
</div>
<script>
window.onscroll = function() {myFunction()};
 
function myFunction() {
    var x = document.body.scrollTop || document.documentElement.scrollTop;
        if (x > 150) 
                {document.getElementById("myP").className = "test1";}
                else if (x > 100) {document.getElementById("myP").className = "test2";} 
                else if (x > 50) {document.getElementById("myP").className = "test3"; 
                } else {
        document.getElementById("myP").className = "";
    }
    var y = document.body.scrollLeft || document.documentElement.scrollLeft;
        document.getElementById("mesures").innerHTML = "scrollLeft = " + y + "px            scrollTop = " +  x + "px" ;
        
}
</script>
 
</body>
</html>

en espérant que cela te rendra service.

**boteha** · 23/06/2017, 20h18

Merci, cela semble intéressant.
je vais travailler sur ma page de test.

Détecter le scroll vertical

JavaScript

Vue hybride

Discussions similaires

Partager

Partager