11496 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'essai de créer des events selon la direction du scroll.
J'arrive a repérer si l'utilisateur scroll vers le haut ou bas et créer des events différents.
Cependant ce que je veux c'est que lorsque l'utilisateur scroll vers le bas,
ma fenêtre scroll vers la div suivante et vis vers ca.

ça marche la première fois mais pas les suivantes.

voici mon code :

var lastScrollTop = 0;
 $(window).scroll(function(event){
   var st = $(this).scrollTop();
   var positionPage = $( window ).scrollTop() * 100 / $('#slide1').height();
   if (st > lastScrollTop){
	  		if(positionPage == 0){
	  			$('html, body').stop().animate({  
                	scrollTop:$('#slide2').offset().top  
				}, 'slow');  
				return false;
	  		} else if (positionPage == 100){ 
	  			$('html, body').stop().animate({  
                	scrollTop:$('#slide3').offset().top  
				}, 'slow');  
				return false;
	  		}
   } else {
	      if(positionPage == 200){ console.log('up scroll : go slide 2');
	  			$('html, body').stop().animate({  
                	scrollTop:$('#slide2').offset().top  
				}, 'slow');  
				return false;
	  		} else if (positionPage == 100){
	  			$('html, body').stop().animate({  
                	scrollTop:$('#slide1').offset().top  
				}, 'slow');  
				return false;
	  		}
   }
   lastScrollTop = st;
   });


en gros je regarde en fonction de la taille de la fenêtre. je ramène notre position en % et si on est dans les 100 premiers % alors on se situe sur le première écran, si c'est entre 101 et 200 on est sur le deuxième et 201 et plus on se situe sur le troisième écran.

Mais voilà ça va marcher une ou 2 fois et ensuite va se bloque. J'ai mis des consoles.log pour voir et ça foire comme si on restait bloqué en haut d'un écran.

Avez vous une idée de pourquoi ce comportement ?
Merci d'avance