Animation jquery en fonction du scroll

Bonjour

J'ai une petite question concernant un code javascript que j'ai trouvé et bidouillé un peu mais qui ne marche qu'à moitié:

j'aimerais réaliser des animations jquery ( dans l'exemple, élargir une div ) en fonction du scroll vertical, par exemple dès que la distance de scroll est de 100px ( à partir du haut évidemment ) l'élément #div s'élargit, cependant, j'aimerais que l'effet inverse se produise quand on remonte au dessus des 100 pixels ( en haut de la page ) . J'ai réussi à obtenir l'animation en descendant; l'élément s'élargit comme il faut, mais pas moyen d'obtenir l'effet inverse au retour ( retour à la largeur initiale de 450px ) .

Voilà où j'en suis :

	
	
    var scrollfunction = $(window).scroll(function(){

var scrollTop = $(window).scrollTop()

      if (scrollTop > 100)
      {
		  $('#div').animate({width: 650}, 600)
      }
	  else {
		  $('#div').animate({width: 450}, 600)
      }
	  
	   $(window).scroll(function() {
	  scrollfunction();
	  });
	  
}); 

J'ai donc déclaré deux variables: la fonction et celle correspondant à la valeur du scroll. il y a peut-être un problème au niveau du rappel de la fonction à la fin mais je suis pas expert donc je suis un peu coincé .

Voilà donc si vous arrivez à identifier le souci ou si vous avez carrément une autre façon de le faire en js / jquery n'hésitez pas

Merci
Modifié par Rafkraft (23 Aug 2013 - 23:47)

Ca devrait vaguement marcher quand meme. Par contre

$(window).scroll(function() {
	  scrollfunction();
	  });

ne sers à rien. Ta fonction est de toute façon appelée à chaque scroll. Et

var scrollfunction = $(window).scroll(function(){

ne fais pas ce que tu veux. La fonction $(window).scroll ne renvois pas une fonction (cf. la doc de jquery).

Si ca ne fonctionne pas après avoir enlevé les bouts de codes inutiles, regardes dans la console d'erreur s'il se passe quelque chose d'anormal.

ok merci jvais essayer de voir
Modifié par Rafkraft (24 Aug 2013 - 12:00)

non, j'ai enlevé les trucs inutiles et je n'arrive toujours pas à obtenir le retour ...

J'ai même essayé avec une deuxième fonction en plus :

$(window).scrollTop()

      if (scrollTop < 100)
      {
		  $('#div').animate({width: 450}, 600)
      }


	  
}); 

Mais rien à faire ...


EDIT : j'ai trouvé le problème, en fait le code marchait, c'est seulement les unités de temps qui posaient problème, je les ai réduites considérablements et le problème est résolu
Modifié par Rafkraft (25 Aug 2013 - 16:39)