在视口中设置动画元素

正如目前在很多网站上看到的那样，我希望在进入视口或从视口等100px时对元素执行某些操作。

我一直在寻找年龄，但到目前为止没有任何工作。

我有一个500px高和100％宽度的元素列表。 我没关系动画等以及我将要做些什么，只需要一些帮助触发然后当他们进入视野时。

我的目标是为元素提供一类动画元素，然后能够使用该类来检查它是否在视图中。

伪代码：

$(window).on('scroll', function() { if (element is in the viewport) { $(this).doSomething(); } }); 

我似乎很懒，但我一直在寻找太久而没有成功。

任何以前的尝试都会在常量滚动时始终触发，因此即使视口中的元素为no并且我正在设置控制台日志，当滚动一点点时我也会有100个日志。

Answer 1

我最近为另一个答案创建了一个类似的解决方案。

JS跟踪窗口的滚动，并比较窗口滚动的距离，与offset().top （跟踪该元素距页面顶部的距离）进行比较。 如果窗口滚动位于元素顶部的-300px范围内，则它会从左侧淡化/动画化动画。

JS：

 var $win = $(window); var $stat = $('.animation-element'); // Change this to affect your desired element. $win.on('scroll', function () { var scrollTop = $win.scrollTop(); $stat.each(function () { var $self = $(this); var prev=$self.offset(); console.log(scrollTop); console.log(prev.top); if ( (scrollTop - prev.top) > -300) { $self.css('opacity', '1').addClass('animated fadeInLeft '); } else { console.log('n'); } }); }).scroll(); 

这是工作的JSfiddle – 向下滚动以查看元素滑入.https：//jsfiddle.net/wigster/5dbt7ft3/1/