javascript - 使用带有 scrollTop 的原型(prototype)来激活 Class(js 类) 的实例(css 类)

Question

我觉得标题很困惑，但我不知道如何命名我想做的事情。

我有一个段落:

<p data-initial="100" data-final="1000">Test</p>

注意数据-*

这一段有一个简单的 CSS:

p {
  color: black;
  margin-top: 500px;
}
p.active {
  color: red;
}

这段是Animation类的一个实例:

+ function($) {
  var Animation = function(element) {
    this.element = $(element);
    this.initial = this.element.data('initial');
    this.final = this.element.data('final');

    if (this.initial > $(this).scrollTop()) {
      this.applyAnimation();
    }
  }

  Animation.prototype.applyAnimation = function() {
    alert('WORKED!!');
    this.element.addClass('active');
  }

  Animation.prototype.disableAnimation = function() {
    this.element.removeClass('active');
  }

  $(window).on('load', function() {
    $('[data-initial]').each(function() {
      var animation = $(this);
      animation = new Animation(this);
    });
  });


}(jQuery);

使用此代码，如果页面滚动超过 100 次，我将尝试在段落中应用 .active 类，但根本不起作用，不会发生这种情况。

我想也许是因为我试图“听到”原型(prototype)内部的卷轴，这是不可能的？如何让我的实例听到滚动并在页面滚动超过 100 时应用该类？？

如果我这样做:

  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      console.log('test');
    }
  });

测试将出现在我的控制台中，因此，window.scroll 代码没有错。

Answer 1

我认为这一行可能会导致问题:

if (this.initial > $(this).scrollTop()) {

“this”将是 Animation 的新实例，它不是元素。也许那应该是 this.element.scrollTop()？