javascript window scroll numéro

Question

Je travaille sur le défilement javascript. Je suit le code html

JSFIDDLE

<div class="wrapper"> 
    <div class="red div current"></div> 
    <div class="blue div"></div> 
    <div class="green div"></div> 
    <div class="yellow div"></div> 
</div> 

Dans le code ci-dessus, j'ai quatre balises div red, blue, green and yellow. Tous sont en position dans css suivant.

html, body { 
    height: 100%; 
} 
.wrapper { 
    overflow: hidden; 
    height: 100%; 
} 
.div { 
    position: relative; 
    height: 100%; 
} 
.red { 
    background: red; 
} 
.blue { 
    background: blue; 
} 
.green { 
    background: green; 
} 
.yellow { 
    background: yellow; 
} 

en html ci-dessus et css la balise div rouge est l'actuel qui signifie que l'utilisateur voit la balise div rouge sur l'écran. Maintenant, ce que j'essaie de faire, c'est que l'utilisateur fasse défiler la fenêtre une fois, puis la prochaine balise div, c'est-à-dire bleu, sera animée et sera visible par l'utilisateur, tandis que l'étiquette rouge sera derrière la bleue. Ce même processus va à la fois pour le vert et le jaune. Le problème est que lorsque l'utilisateur fait défiler une fois, la balise div devrait s'animer, mais mon code javascript actuel continue de lire le parchemin et d'animer les balises div l'une après l'autre. Ce que je veux, c'est que l'utilisateur fasse défiler une fois, puis que le défilement soit désactivé jusqu'à ce que la balise div bleue soit animée. Ensuite, le défilement devrait être activé. Encore une fois lorsque l'utilisateur fait défiler la deuxième fois, le défilement doit être désactivé jusqu'à ce que l'étiquette verte div termine son animation. Idem pour le jaune.

Comment puis-je réaliser ci-dessus?

Voici mon javascript

$(window).on("scroll", function() { 
    var next = $('.current').next(); 
    var height = next.outerHeight(); 

    next.animate({top: '-=' + height}, 500, function() { 
     $(this).prev().removeClass('current'); 
     $(this).addClass('current'); 
    }); 
}); 

Answer 1

S'il vous plaît jeter un oeil sur la mise à jour JsFiddle

$(window).on("scroll", function() { 
var next = $('.current').next(); 
var height = $('.current').outerHeight(); 
$('.current').prevAll().each(function(){ 
    height += $(this).outerHeight(); 
}); 

next.animate({top: '-=' + height}, 500, function() { 
    $(this).prev().css('top',''); 
    $(this).prev().toggleClass('current'); 
    $(this).toggleClass('current'); 
}); 

});

Answer 2

La raison principale pour laquelle votre exemple ne fonctionnait pas comme prévu était que vous étiez en train de positionner les divs de manière relativement précise et de ne pas les déplacer au bon endroit.

travail jsFiddle:

http://jsfiddle.net/seanjohnson08/rVVuc/6/

.wrapper { 
    overflow: hidden; 
    height: 100%; 
    position: relative; 
} 
.div { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 100%; 
} 
.current{ 
    top: 0; 
} 

Si vous êtes à la recherche d'un moyen de limiter la quantité d'événements de défilement tiré, essayez la limitation: http://benalman.com/projects/jquery-throttle-debounce-plugin/. Ma solution ne l'exige pas, car peu importe le nombre de fois où elle déclenche l'événement de défilement, elle demande seulement à jquery de s'animer en haut: 0, il n'y a aucune chance qu'elle s'anime après cela.