11550 sujets

JavaScript, DOM et API Web HTML5

[Jquery] Scroll up or down -> event

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.
Le principe est que lorsque on scroll vers le bas, la class .active (qui sert a cibler mes div) de ma première div est supprimée et .active est ajouté à la div suivante.
Cela fonctionne pour lors du premier scroll, mais pas du suivant.

Aidez moi svp

voici mon code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ALBERT</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2.js"></script>

  
<style type="text/css">

#container div{width:500px;height:500px}

</style>

</head>
<body>

<div id="container">
	<div class="active">01</div>
       <div>02</div>
	<div>03</div>
	<div>04</div>
	<div>05</div>
	<div>06</div>
</div>

<script type="text/javascript">

$(window).load(function(){
	
	 var tempScrollTop, currentScrollTop = 0;	
	  $current = $(".active");	
	$(window).scroll(function(){
		currentScrollTop = $(window).scrollTop();
		next = $('.active');
	 	prev = $('.active');

		if (tempScrollTop < currentScrollTop )//scrolling down
			{					
				$current.removeClass('active').next().addClass('active');		
				$.scrollTo(next, 500);	
			}
		else if (tempScrollTop > currentScrollTop )//scrolling up
			{	
				$current.removeClass('active').prev().addClass('active');
				$.scrollTo(prev, 500);
			}
		tempScrollTop = currentScrollTop;
			}); 
	});
</script>

</body>
</html>


Merci pour votre aide
Modifié par 1199ani (13 Apr 2012 - 17:11)
Sujet clos
Aller à