How to run a function once in $ (window).scroll()? - scroll

Question

I'm trying to make a page that launches different animation depending on the scroll.
The principle is simple, when I'm in a block with a data-attribute concerning the type of animation. I run this animation.
To do this, my script is based on the event $(window).scroll().
When my $(window).scrollTop() is equal to the position of my block, I run the animation. When I leave this block I stop the animation. I would like once the animation is complete, start once my reset function. Currently, she embarked loop as I am not in a block with a data-attribute.
A demo
I'm really stuck. Thank you in advance. Manu
my js file :
$(document).ready(init);
// Ma class Screen
function Screen(name){
this._name = $("#"+name);
this._hauteur;
this._position;
this._screenEnd;
this._screenEnd;
this.screenHeight = function() {
this._hauteur = this._name.data('height');
return this._hauteur;
}
this.topPosition = function() {
this._position = this._name.position().top;
return this._position;
}
this.screenEnd = function() {
this._screenEnd = (this._name.position().top)+(this._name.data('height'));
return this._screenEnd;
}
}
var mesScreens = new Array();
$(".screen").each(function(i){
mesScreens[i] = new Screen($(this).attr('id'));
mesScreens[i]._name.css("height", mesScreens[i].screenHeight());
//console.log(mesScreens[i]);
});
var fini = false;
function init(){
console.log($(".screen").length);
var scrollTimer = null;
$(window).scroll(function () {
var monScrollTop = $(window).scrollTop();
for (var i=0; i<mesScreens.length ; i++) {
if(monScrollTop>(mesScreens[i].topPosition()+5) && monScrollTop<=(mesScreens[i].screenEnd()+5)){
//started = true;
if(mesScreens[i]._name.data("func") == "panorama"){
horizontalPanel(mesScreens[i]._name, mesScreens[i]._hauteur, mesScreens[i]._position);
}else if(mesScreens[i]._name.data("func") == "anim"){
anim(mesScreens[i]._name, mesScreens[i]._hauteur, mesScreens[i]._position, 4);
}
//console.log(mesScreens[3]._hauteur);
}else {
//console.log("je sors");
reset(mesScreens[i]._name, mesScreens[i]._hauteur);
}
};
});
}
/*
* Function horizontalPanel
* #screen : le screen concerné
* #hauteur : hauteur du div
*/
function horizontalPanel(myScreen, hauteur, position){
//console.log("Fonction horizontalPanel debut || fini = "+fini);
var $img = myScreen.children("img");
var deltaScroll = ($(window).scrollTop() - position);
var scrollPercentage = ((deltaScroll / (hauteur)) * 100) ;
//console.log(scrollPercentage);
$img.css('position', "fixed");
$img.css("bottom", "");
$img.css('top', "0px");
$img.css('left', "0px");
$img.css("left", -scrollPercentage+"%");
}
function anim(myScreen, hauteur, position, nbImg){
//console.log("ok");
var $img = myScreen.children("div.image");
var deltaScroll = ($(window).scrollTop() - position);
var scrollPercentage = ((deltaScroll / (hauteur)) * 100) ;
var percentNb = ((nbImg/hauteur) * 100).toFixed(2);
for(var i=0; i<nbImg; i++){
//console.log("if(bla)");
}
//console.log("__");
if(scrollPercentage)
//console.log(hauteur);
$img.css('position', "fixed");
$img.css("top", "0px");
$img.css("bottom", "");
$img.css('background-position', "0 "+ scrollPercentage + '%');
$img.css('left', "0px");
}
function reset(myScreen){
//console.log("Fonction Reset || fini = "+fini);
myScreen.children().css('position', "relative");
myScreen.children().css("bottom", "0px");
myScreen.children().css("top", "");
myScreen.children().css("left", "");
}
An extract from html :
<div id="screen3" data-height='2300' data-func='panorama' class="screen">
<img src="img/screen3.jpg" alt="screen-3">
</div>
<div id="screen4">
<img src="img/screen4-2.jpg" alt="screen-4">
</div>