Question

我一直在努力实现这一点，因为我想了解它是如何工作的。

在https://michalsnik.github.io/aos/上显示我正在尝试做的事情。

简单地说，动画只在向下滚动时触发。这就是我想要实现的目标。

到目前为止，我的想法是

$(window).on('scroll', function(event) {
   // if window.pageYOffset > the element's YOffset, trigger animation
   // If window.pageYOffset < make element default state again
})

我认为这是正确的想法。但它也必须在平板电脑和移动设备上保持一致，我相信我发布的图书馆。

有谁知道如何简单地实现这一目标？我相信它可以很容易地完成，但似乎无法接近解决方案。

Answer 1

请参阅以下修订代码：

JQuery：

$(function() {
  $("#id_home").hide();
  var offset_top = 100; // Where you want the fade to begin 
  var check_div = function(verify) {
    var scroll_top = $(window).scrollTop();
    if (!$("#id_home:animated").length || verify) {
      if (scroll_top > offset_top) {
        $("#id_home").fadeIn(1300, function() {
          if (!verify) check_div(true);
        });

      } else {
        $("#id_home").fadeOut(1300, function() {
          if (!verify) check_div(true);
        });

      }
    }
  }

  check_div(false);
  $(window).scroll(function() {
    check_div();
  });
});

HTML：

<body style="height:999px;">
  <div id="id_home" style="margin-top:0px;background:#aaa;">Hello, my young friend</div>
</body>

CSS：

#id_home {
  position: fixed;
}

请在此处查看：https://jsfiddle.net/billy_farroll/pjj584rx/1/

希望这更好。

Answer 2

我自己想出来。我的想法是在元素上使用偏移量并迭代它直到身体得到它的位置。

滚动动画

2 个答案: