jQuery if (.scrollTop() < 100) 仅适用于页面加载...？

Question

我敢肯定我在这里遗漏了一些简单的东西，但我一辈子都弄不明白。我有这个小 CSS 动画，我想在页面加载时开始，每当用户滚动到页面顶部（或单击将他们带到顶部的导航 link 时） .如果我纯粹用 CSS 来做，它只会在页面加载时工作一次。所以我对 jQuery 的意思是：

检查页面滚动是否小于 50px
然后删除具有动画
最后重新应用 class，再次启动动画。

我的 JS 代码如下所示：

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() < 50) {
      $('.restart').removeClass('animated');
      $('.restart').addClass('animated');
    }
  });
});

HTML:

<section id="start">
  <div class="aufmacher">
    <div class="container">
      <h1>Wir bieten</h1>
        <ul>
        <li class="restart">Ambulante Versorgung</li>
        <li class="restart">Tagespflege</li>
        <li class="restart">Beratung &amp; Service</li>
      </ul>
    </div>
  </div>
</section>

CSS:

@keyframes sliiide {
  0% { padding-left: 700px; }
  100% { padding-left: 0; }
}
.animated {
  animation: sliiide 1.5s 1;
}
.animated:nth-child(2) {
  animation-duration: 2s;
}
.animated:nth-child(3) {
  animation-duration: 2.5s;
}

Find a JSFiddle here.

我不得不承认我并不是很了解jQuery，这对我来说主要是复制粘贴、反复试验。我已经在互联网上搜索了一段时间，我认为这应该行得通，但行不通？

非常感谢任何帮助！另外，如果有更好的方法，请告诉我。我会尝试...

感谢您的宝贵时间，安娜~

Answer 1

试试这个：

jQuery:

$(document).ready(function() {
    $('#start').click(function(){
    //alert($(window).scrollTop());
    });
   $(window).scroll(function() {
      if ($(window).scrollTop() < 80) {
         $('.restart').addClass('animated');
      }
      else
      {
         $('.restart').removeClass('animated');
      }      
   });
});

-删除和添加- 立即发生得如此之快，以至于没有时间进行评估。这个解释的不详细，如果有人有更深的解释，请发帖给大家开导。

注意：这是一个想法，一个可行的解决方案，不是经过 100% 测试的东西。希望对你有帮助。

Answer 2

与其删除并重新添加 class，不如尝试删除并添加元素本身。

$(document).ready(function() {
  //Use a bool here so you can detect when you want to reset the animation
  var reset = false;

  $(window).scroll(function() {
    if ($(this).scrollTop() < 80) {
        if (reset) {

        //set to false so the animations only occur once
        reset = false

        //for each item to be animated, replace with new copy
        $('.animated').each(function(){
            var el = this;
            var clone = el.cloneNode(true);
            el.parentNode.replaceChild(clone, el);
        });
      }
    }else {
        //prepare for reseting animation
        reset = true
    }
  });
});

不要忘记将动画 class 添加到适当的元素，以便它们在加载时动画

<section id="start">


<div class="aufmacher">
    <div class="container">
      <h1>Wir bieten</h1>
        <ul>
        <li class="restart animate">Ambulante Versorgung</li>
        <li class="restart animate">Tagespflege</li>
        <li class="restart animate">Beratung &amp; Service</li>
      </ul>
    </div>
  </div>
</section>

Answer 3

通过调用

$('.restart').removeClass('animated');
$('.restart').addClass('animated');

如果没有 animated class，UI 线程永远不会看到 .restart，因此它不会启动新动画。

您可以通过在删除和添加 class 之间添加一个 setTimeout 来解决此问题，然后当 UI 线程看到一个 class 被添加时（在新的事件循环中），它将重新运行动画

$(document).ready(function() {
 $('#start').click(function(){
    alert($(window).scrollTop());
  });
  $(window).scroll(function() {
    if ($(this).scrollTop() < 80) {
      $('.restart').removeClass('animated');
      setTimeout(function(){
          $('.restart').addClass('animated');      
      }, 0);
    }
  });
});

@keyframes sliiide {
  0% { padding-left: 700px; }
  100% { padding-left: 0; }
}
.animated {
  animation: sliiide 1.5s 1;
}
.animated:nth-child(2) {
  animation-duration: 2s;
}
.animated:nth-child(3) {
  animation-duration: 2.5s;
}

#start {
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="start">
  <div class="aufmacher">
    <div class="container">
      <h1>Wir bieten</h1>
    <ul>
        <li class="restart"><span class="fa fa-check-square-o fa left"></span> Ambulante Versorgung</li>
        <li class="restart"><span class="fa fa-check-square-o fa left"></span> Tagespflege</li>
        <li class="restart"><span class="fa fa-check-square-o fa left"></span> Beratung &amp; Service</li>
      </ul>
    </div>
  </div>
</section>

见https://jsfiddle.net/mendesjuan/a27mtq23/4/

jQuery if (.scrollTop() < 100) 仅适用于页面加载...？

jQuery if (.scrollTop() < 100) only works on page load...?

jquery

animation

scrolltop