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.

**boteha** · 25/06/2017, 19h31

Bonjour,

J'ai juste gardé ce petit morceau de ton code que je mets à la fin du body :

Code :

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
<script type="text/javascript">
<!--
window.onscroll = function() {myFunction()};
 
function myFunction() {
var x = document.body.scrollTop || document.documentElement.scrollTop;
if (x > 100) 
{
document.getElementById("panier").className = "fixed";
}
else
{
document.getElementById("panier").className = "";
}
 
}
//-->
</script>

Et un doigt de CSS avec gestion responsive :

Code CSS :

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

1
2
3
4
5
6
7
div#panier.fixed {position: fixed; top: 10px}
div#panier.fixed div.prom, div#panier.fixed p#ps {display: none}
 
@media screen and (max-width: 768px)
{
div#panier.fixed {position: static}
}

Cela semble très bien marcher, voir ces deux exemples :

Test_1

Test_2

1)
Un truc que je comprends pas :

Code :

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

1
2
var x = document.body.scrollTop || document.documentElement.scrollTop;
if (x > 100)

J'ai l'impression que les 100px sont calculé sur le scroll du div#panier, pas sur body.

En fait cela marche pareil en enlevant " document.body.scrollTop || "

Code :

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

var x = document.documentElement.scrollTop;

C'est ce que j'ai fait dans Test_2.

2)
Le script est super léger mais ne vaut-il pas mieux le charger au niveau du serveur plutôt que l'intégrer à la page html ?
Si oui je suis tellement nul en javascript que je ne sais pas comment faire...

**boteha** · 29/06/2017, 20h13

Bonjour,

J'ai réfléchi à une petite complication.

Au cas où la hauteur du bloc en position fixe est supérieure à la hauteur de la fenêtre active il devient impossible d'accéder au contenu du bloc qui sort de la fenêtre en bas.
Dans ce cas il faut que le bloc reste en position "scrollable".

Donc, dans le code javascript il faudrait ajouter une nouvelle condition :

Code :

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

1
2
3
4
5
6
7
8
9
10
function myFunction() {
var x = document.body.scrollTop || document.documentElement.scrollTop;
if (x > 100 AND hauteur div#panier < hauteur fenêtre active) 
{
document.getElementById("panier").className = "fixed";
}
else
{
document.getElementById("panier").className = "";
}

Je vois comment coder hauteur div#panier < hauteur fenêtre active en javascript, je suppose que c'est possible.

Merci d'avance.

**boteha** · 30/06/2017, 19h18

Bonjour,

Cela peut donner :

Code :

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
<script type="text/javascript">
<!--
window.onscroll = function() {myFunction()};
 
function myFunction() {
var x = document.body.scrollTop || document.documentElement.scrollTop;
var h = document.getElementById("panier").offsetHeight;
var b = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
 
if (x > 100 && h < b) 
{
document.getElementById("panier").className = "fixed";
}
else
{
document.getElementById("panier").className = "";
}
 
}
//-->
</script>

Cela marche au moins sur Firefox : Test

Je me pose la question de la portabilité sur tous les navigateurs.

**NoSmoking** · 02/07/2017, 08h08

Je me pose la question de la portabilité sur tous les navigateurs.

le mieux est de faire les tests pour ce rendre compte

**boteha** · 02/07/2017, 12h17

Bonjour,

Oui, tu as raison.

Il est clair que cela doit marcher avec les navigateurs récents.

Il faut donc tester les vieux coucous mais je ne les ai pas sous la main.

Je sais qu'IE permet d'émuler les vieux coucous mais pour Chrome ou Firefox je ne suis pas sûr que ce soit possible.

N'y a-t-il pas des sites qui permettent ce genre de tests ?

**NoSmoking** · 02/07/2017, 19h10

Pour tous les navigateurs, pour peu que tu mettes un <!DOCTYPE html> à tes documents, tu auras accès à document.documentElement et dans ce cas il n'y a aucune raison pour que cela ne marche pas.

**boteha** · 02/07/2017, 19h19

Bonjour,

Code html :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Je suppose que c'est bon.

Je suppose aussi que certains vieux coucous ne connaissent pas window.onscroll mais ce n'est pas trop grave, il pourront quand même naviguer.

**NoSmoking** · 02/07/2017, 19h33

• <!DOCTYPE html> est très largement suffisant.

• window.onscroll est reconnu depuis le siècle dernier

**boteha** · 02/07/2017, 19h41

Bonjour,

Envoyé par NoSmoking

• <!DOCTYPE html> est très largement suffisant.

Ce n'est pas le sujet mais dans mon DOCTYPE je dois indiquer que je suis en xhtml 1.0 strict, non ?

Encore merci de ton aide.

**NoSmoking** · 05/07/2017, 18h19

Tu peux effectivement laisser ton DOCTYPE mais tu peux également mettre le DOCTYPE Html5 en conservant la rigueur/syntaxe (X)HTML.

**boteha** · 05/07/2017, 18h29

Bonjour,

Comme je ne suis pas en html5 autant laisser le DOCTYPE xhtml.

Il me semble que le navigateur tient compte de l'information pour traiter mon code.

**NoSmoking** · 05/07/2017, 18h42

N’hésites pas à passer ta discussion en résolue !

Détecter le scroll vertical

JavaScript

Discussions similaires

Partager

Partager