Question

我正在开展一个项目，我很难解决这个问题。这是问题： - 当用户向下滚动并且石灰颜色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/

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

1 个答案: