在Scroll JS上制作动画

Question

我是JavaScript的新手，正在尝试将一些动画滚动添加到站点。

我有多个div，每个div具有唯一的类名，并且每个div具有相同的 .section 类。

我想为滚动中的每个 .section 设置动画，而不触发其他 .sections

<section class="home__one section></section>
<section class="home__two section></section>
<section class="home__three section></section>
<section class="home__four section></section>

$(window).on("scroll",function(){
    var winTop = $(this).scrollTop();
    var section = $(".section").offset().top;

    if(winTop >= section-400) {
      $(".section").addClass("animate");
    };
});

上面的代码显然会在第一个 .section 到达滚动条上的每个位置时触发。

当我看到一个 .section 时，我无法确定如何触发它。

我可能完全以错误的方式进行此操作，因此，如果我愿意，将非常感谢您的帮助。

Answer 1

在这里，您需要遍历所有可用部分，并且无论匹配哪个部分，都必须应用该类。

if (winTop >= section - 400) {
  $(".section").addClass("animate");
};

此外，;语句的末尾没有if。

您的最终代码如下：

$(window).on("scroll", function(){
  var winTop = $(this).scrollTop();

  $(".section").each(function () {
    var section = $(this).offset().top;
    if(winTop >= section-400) {
      $(this).addClass("animate");
    }
  });
});

我建议从所有其他部分中删除类animate。因此，以这种方式更改代码：

$(window).on("scroll", function(){
  var winTop = $(this).scrollTop();

  $(".section").removeClass("animate").each(function () {
    var section = $(this).offset().top;
    if(winTop >= section-400) {
      $(this).addClass("animate");
    }
  });
});

此外，一旦开始添加类，就不希望其他人在其中添加该类。因此，也要提供最高价值。

$(window).on("scroll", function(){
  var winTop = $(this).scrollTop();

  $(".section").removeClass("animate").each(function () {
    var section = $(this).offset().top;
    if(winTop >= section-400) {
      $(".section").removeClass("animate");
      $(this).addClass("animate");
    }
  });
});

工作片段：

$(window).on("scroll", function(){
  var winTop = $(this).scrollTop();

  $(".section").removeClass("animate").each(function () {
    var section = $(this).offset().top;
    if(winTop >= section-400) {
      $(".section").removeClass("animate");
      $(this).addClass("animate");
    }
  });
});

.section {
  height: 750px;
}
.animate {
  background: #960;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home__one section">Section one</section>
<section class="home__two section">Section two</section>
<section class="home__three section">Section three</section>
<section class="home__four section">Section four</section>

预览：

通过缓慢滚动可以看到工作的演示：JSBin Demo。