Question

正如目前在很多网站上看到的那样，我希望在进入视口时使用元素，或者从视口等处理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/

在视口中设置动画元素

1 个答案: