运行一次动画，同时向下和向上滚动

Question

我正在做一个项目，我很难解决这个问题。这是问题：- 当用户向下滚动时，石灰色div可见动画将开始。当用户向上滚动动画时将停止。但真正的问题是当石灰色div可见时，动画会多次运行。我只想在石灰色div 可见时运行一次动画。请看jsfiddle演示。这是javascript代码片段。

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);
    });
}

提前谢谢，为我的英语道歉。请帮我解决这个错误

Answer 1

添加一个全局标志，指示该区域是否可见：

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;
}

小提琴：http://jsfiddle.net/bortao/BB2k5/