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

使用此代码，我试图在段落中应用.active类，如果页面滚动超过100，但根本不工作，不会发生。

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

如果我这样做：

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

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

Answer 1

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

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

＆＃34;这＆＃34;将是Animation的新实例，它不是一个元素。也许这应该是this.element.scrollTop()？

使用scrollTop原型使类（js类）的实例处于活动状态（css类）

1 个答案: