Discussion :

[misterfredy]

Alors Voici ce que je voudrais faire :
Voici le code :

html:

Code :

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

1
2
3
 
<div class="test1 move"></div>
 <div class="test2 move"></div>

Jquery

Code :

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

1
2
3
4
5
 
$(function(){
 
    objet_move  = // $('.test1'); pour la div de class "test1" ou $('.test2'); pour la div de class "test2".
});

Mon but c'est que les balise de class "move" prennent en compte ma fonction Jquery en s'adaptant à leur première classe (test1 ou test2).
En gros dans mon code Jquery grace à la classe "move" , objet_move sera égal à test1 ou test2.
Je sais pas trop si je me suis fait comprendre.
Sinon est ce que ceci est possible SVP merci.

[SylvainPV]

Rien compris.

Tu veux sélectionner quoi, comment ? Qu'est-ce qui fait que objetMove sera parfois test1 et parfois test2 ? Cette fonction est censée être déclenchée par un événement, une condition ?

[SpaceFrog]

Code :

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

1
2
3
4
5
6
7
8
9
$(function(){
 
     $('.move').on('click', function(){
 
if($(this).hasClass('test1') { alert('je suis test 1');}
 
})
 
});

[misterfredy]

Je suis désolé c'est compliqué à expliquer

Je vais vous donner un plus gros code ça sera plus simple:

Css:

Code css :

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
.test1{
	display:block;
	width: 500px;
	height:300px;
	background-color:blue;
	margin-left: 0;
	transition: 1s all ease-out;
}
.test2{
	display:block;
	width: 500px;
	height:300px;
	background-color:green;
	margin-left: 0;
	transition: 1s all ease-out;
}
 
.test1.test_move{
	margin-left: 300px;
}
 
.test2.test_move{
	margin-left: 500px;
}

Le Jquery:

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
22
23
24
25
$(function(){
    // Stockage des références des différents éléments dans des variables
    objet_move  = $('.move');
 
    // Calcul de la marge entre le haut du document et la div
	limiteTop = objet_move.offset().top;
 
    // On déclenche un événement scroll pour mettre à jour le positionnement au chargement de la page
    $(window).trigger('scroll');
 
    $(window).scroll(function(event){
        // Valeur de défilement lors du chargement de la page
        windowScroll = $(window).scrollTop();
 
        // Mise à jour du positionnement en fonction du scroll
        if( windowScroll <= limiteTop)
		{
            objet_move.addClass('test_move');
        }
		else
		{
            objet_move.removeClass('test_move');
        }
    });
});

Le soucis c'est que les 2 div bouge en même temps alors que je voudrais selon le scrool que test1 bouge et apres test2.

bien sur ça marche si je met a la place de " objet_move = $('.move'); " je met la class correspondante mais ça me fait retaper le code a Jqueri a chaque fois (et le problème c'est que j'ai une trentaine de class à appliquer) donc j'aimerais trouver une solution pour sélectionner la class à coté de la class .move.
Avez vous compris ce que je voulais faire?

[SylvainPV]

selon le scrool que test1 bouge et apres test2.

Voilà, c'est précisément là que tu décris ce que tu cherches vraiment, et ça devrait être là le point de départ de la réflexion.

L'objet à déplacer doit varier selon la position de la scrollbar, qui est récupérée dans événement scroll, donc la variable objet_move devrait être déclarée à l'intérieur du callback appelé via window.scroll.

Les variables limiteTop (car il doit y en avoir a plusieurs, une par objet à déplacer, contrairement au code actuel) déterminent la position Y à partir de laquelle on a atteint l'objet, et donc à partir de laquelle on commence à "entrainer" l'objet avec le scroll. On arrête d'entraîner l'objet à partir du moment où on en atteint un autre, ce qui signifie que pour déterminer l'objet à déplacer objet_move, on doit établir quelle est la limiteTop la plus proche et inférieure à la position actuelle du scroll.

Je te laisse plancher là-dessus et faire une proposition de code, qu'on t'aidera à debugger si nécessaire.