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时，您要将课程animated和bounceInLeft添加到.top-nav元素
如果scrollPosition仍然超过50，则不会发生任何事情
当scrollPosition低于50时，您第一次没有删除bounceInLeft课程而是添加bounceOutLeft。只有在这种情况下，添加bounceOutLeft时才会起作用，但是：
当scrollPosition低于或超过50时，bounceInLeft和bounceOutLeft这两个类已经分配给.top-nav元素=＆gt; 什么都没发生。

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

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

使用animate.css反弹显示隐藏

1 个答案: