Question

我的标题可能有点令人困惑，但我想要做的是使用滚动函数来确定元素何时进入视口并且每次指定元素进入时运行每个函数。但我只想让函数运行一次。

$(window).on('scroll', function() {
      $('.counter').each(function(index, value) {
           triggerpoint = $(window).height() * .8 + $(window).scrollTop();
           counterElement = $(this).offset().top;
           if(counterElement < triggerpoint) {
                $(this).countTo();
           }
      });
});

问题在于每次我滚动它时会一次又一次地运行.countTo()元素上的.counter函数。我只希望.countTo()函数为每个.counter元素运行一次。

任何帮助或想法？

Answer 1

所以我最终找到了解决这个问题的方法。一旦函数运行一次，我就添加了一个“元素可见”类。然后我在开头添加了一个简单的if .hasClass语句，以确定该元素是否已经通过该函数。

$(window).on('scroll', function() {
$('.counter').each(function(index, value) {
if ( $(this).hasClass( "element-visible" ) ) {
  // do nothing
  }
   else {
  triggerpoint = $(window).height() * .8 + $(window).scrollTop(); // Call point in Viewport: viewport height * decimal(%) + pixels to top of window

  counterElement = $(this).offset().top;
  if  (counterElement < triggerpoint) {
    $(this).addClass("element-visible");
    $(this).countTo();  
    }
    }
    });
});
});

使用.on（'scroll'）和.each（）函数每次运行一次

1 个答案: