Discussion :

[carolineclara]

Bonjour à tous,

Je suis débutante sur javascript/jQuery.
J'ai mis en place un script, qui me fait apparaitre une div au scroll. Jusque là tout va bien. Une fois ma div visible, je déclenche une fonction animate(), si ma valeur de scroll atteint la valeur définit. Tout fonctionne. Cependant je n'arrive pas à trouver comment faire pour revenir en arrière. J'ai cherché, j'ai testé plusieurs choses, mais ça ne fonctionne pas (stop(),finish(),fadeOut()...) Peut-être m'y suis-je mal prise ?

Comme les éléments se déclenchent au scroll, je voudrais que lorsque je remonte dans ma page, l'action se "rembobine".

Voici mon code :

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
<div class="etape etape01">
	<span class="progress"><span class="active"></span></span>
	<p>message</p>
</div>
 
<script>
$( window ).scroll(function() {
        if($(this).scrollTop() > 300){
                $('.etape01').animate({opacity:'1'},400);
                if($(this).scrollTop() > 350){
                        $('.active').animate({height:'100%'},800);
                }else{
 
                }
        }
});
</script>

C'est dans mon else que je ne sais pas quoi mettre. Je me doute, que la solution est simple mais je ne trouve pas.

Merci d'avance pour votre aide !

[NoSmoking]

Bonjour et bienvenue sur DVP.

Je dirais que dans ton schéma il te faut gérer le sens du scroll et non pas la position.

Perso je pense que cela doit devenir vite ch..t de ne pas avoir la main sur le scroll de la page que l'on visite

[SpaceFrog]

Peut-être également stocker les valeurs des propriétés avant animation dans un attribut data- de l'objet afin de pouvoir les réaffecter pour le retour...

[carolineclara]

Bonjour,

Merci pour vos réponses. Je n'ai pas précisé que j'ai au moins deux éléments qui fonctionnent de cette manière. Ils se succèdent. Donc si je change ma condition en lui demandant de prendre en compte le sens dus scroll, ça ne fonctionnera plus je pense.

Et je n'ai pas bien compris l'histoire du data-, pourriez m'expliquer un peu plus ?

Merci !

[SpaceFrog]

Un petit exemple de stockages du data poru réinitialiser la position:
https://jsfiddle.net/d6soxan0/

Au moment du click sur le div je stocke sa position, sur le click du bouton reset je lui remet la position stockée

[carolineclara]

D'accord, c'est intéressant comme fonction, mais je n'ai pas de bouton à cliquer moi.
Je ne peux pas vous montrer car le site n'est pas en ligne mais par exemple, j'ai quelque chose comme ça http://www.travailler-autrement.org/#process sauf que moi actuellement lorsque je remonte mes barre ne se "rembobinent" pas pour ré-apparaitre au scroll.

C'est ce système qu'il me manque.

Je suis preneuse de toute idée...

Merci !