上下滚动一次运行动画

Question

I am working on one project and i am having difficultly to solve this issue. Here is problem:- When user scroll down and lime color div visible animation will start. when user scroll up animation will stop. But real problem is animation running multiple times when lime color div visible. I want to run animation only once when lime color div visible. Please see jsfiddle demo. Here is javascript code snippet.

function scollPosition(){
var sotpScroll = 0;
    $(window).scroll(function(){
        if(sotpScroll == 0){
            sotpScroll = 1;
            var cPosition = $('.c').offset();
            var animationStartPoint = cPosition.top - 100;
            console.log(animationStartPoint);
            // console.log('c class position' + cPosition.top);
            var dPosition = $('.d').offset();
            // console.log('d class position' + dPosition.top);
            var windowPosition = window.pageYOffset;
            console.log('window position:- ' + windowPosition + ' dPosition.top:- ' + dPosition.top);
            if (windowPosition > animationStartPoint && windowPosition < dPosition.top){
                animation();
            }
        }
        setTimeout(function(){sotpScroll=0},10);
    });
}

Thankx in advance and apologies for my english. Please help me to solve this bug

Answer 1

Add a global flag that indicates if the area is visible or not:

var areaVisible

[...]

if (windowPosition > animationStartPoint && windowPosition < dPosition.top) {
// Area is visible
   if (!areaVisible) { // If just became visible
      animation(); 
   }
   areaVisible = true; // Prevent more animations
} else {
   areaVisible = false;
}

Fiddle: http://jsfiddle.net/bortao/BB2k5/