使用 animate.css 反弹显示隐藏

Question

这个有效

$(window).on('scroll', function() {
scrollPosition = $(this).scrollTop();
if (scrollPosition > 50) {
  $('.top-nav').show();
} else {
  $('.top-nav').hide();
}});

这只有效一次（反弹后会发生什么？因为我无法让元素再次反弹）

$(window).on('scroll', function() {
scrollPosition = $(this).scrollTop();
if (scrollPosition > 50) {
    $('.top-nav').css('visibility', 'visible').addClass('animated bounceInLeft');
} else {
    $('.top-nav').addClass('animated bounceOutLeft');
}
});

Answer 1

您的代码执行如下：

scrollPosition 位于顶部
当 scrollPosition 超过 50 时，您将 classes animated 和 bounceInLeft 添加到 .top-nav 元素
如果 scrollPosition 保持在 50 以上，则不会发生任何事情
当 scrollPosition 第一次低于 50 时，您并没有删除 bounceInLeft class，而是添加了 bounceOutLeft。只有在这种情况下，添加 bounceOutLeft 才会起作用，但是：
当 scrollPosition 低于或超过 50 时，classes bounceInLeft 和 bounceOutLeft 都已分配给 .top-nav 元素 => 没有任何反应。

以上只是一种可能的情况，但底线仍然是相同的，您正在添加动画 class 而不是切换它们。

同样适用于可见性。嗯，差不多...

使用 animate.css 反弹显示隐藏

show hide using animate.css bounce

jquery

animate.css