Question

当您向下滚动时，我试图使元素淡入。我希望它们在向下滚动至div开始的位置时显示，我可以使用第二个横幅，但是第三个横幅内容不会消失。此外，即使第二个横幅代码有效，也应该有一个更好的方法，也许可以重用。我似乎无法弄清楚。任何帮助将不胜感激。

$(window).on('scroll', function() {
    if($(this).scrollTop() > 100) {
      $('.second-banner-content').addClass('animated fadeInUp slow');
      $('.second-banner-img').addClass('animated fadeInUp slow');
    }
  });

  $(window).on('scroll', function() {
    if($(this).scrollTop() > 300) {
      $('.third-banner-content').addClass('animated fadeIn slow');
    }
  });

Kivy Install gone awry - Windows 10 (was working, now not after gstreamer)

Answer 1

您可以使用AOS之类的插件，也可以计算高度并尝试类似的操作

var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
     $(this).addClass('animated fadeInUp slow');
}

https://codepen.io/iamaditya7/pen/aaBBpP

滚动多个元素上的jQuery addclass

1 个答案: