JQuery 检查元素何时在视口中答案

【问题标题】：JQuery checking when element is in ViewportJQuery 检查元素何时在视口中
【发布时间】：2017-01-30 00:48:55
【问题描述】：

我已经尝试了十几个库来实现这种效果，但我一定在某个地方犯了错误。我目前正在使用这个库：- zeusdeux/isInViewport.

在我的 css 中，我有一个名为 .animated-element 的样式，如下所示：-

.animation-element {
}
.in-view {
}

当添加 .in-view 类时，我有几个 css 元素会启动动画：-

.trans-1 {
  -webkit-transition: 2s;
  transition: 2s; 
}
.fade {
  opacity: 0;
}

.fade.in-view {
  opacity: 1;
}

在我的 html 中，我有带有这些类的 div 元素用于制作动画：-

<div class="fade trans-1 animation-element">
                <h2 class="medium-subheader-bold">Header</h2>
</div>

最后，javascript 使用库检查一个元素是否在视口中，如果是，则向该元素添加一个类。从而将 .fade 更改为 .fade.in-view （不透明度 0 到 1）：-

(function($) {
    $(document).ready(function() {
        $(window).scroll(function() {
            $('.animation-element').removeClass('in-view');
            $('.animation-element:in-viewport').addClass('in-view');
        });
    });
}(jQuery));

当我在浏览器中加载页面时，页面中的所有元素都会立即加载并进行动画处理。当我检查网页以检查视口中不可见的元素时，我可以看到它们在添加和删除视图内类之间快速闪烁。我还尝试从上面的 javascript 中删除 $('.animation-element').removeClass('in-view'); 行，但仍会立即添加 in-view 类，即使元素远离视口。

我已经用几个库尝试过这个并且一直遇到同样的问题，所以这一定是我实现它的方式而不是库的错。

我还应该说我正在使用 Pug 生成 html、常规 css，并通过 node.js 提供整个页面。

【问题讨论】：

创建一个重现问题的演示
听起来它可能是“视口”的考虑范围，您能否获得视口的高度console.log( $(window).height() ); 并将其与您的 div 的顶部位置console.log( $'.animation-element').position().top ); 进行比较？也许还可以在您的 CSS 中定义 html, body { height: 100%; width: 100%; }，这样您就不会无意中测量 html 的全部范围。

标签： javascript jquery html css node.js

【解决方案1】：

我终于弄清楚了问题所在。我花了一整天的时间尝试在 JSFiddle 中重新创建它并修改不同的部分。最后是因为我没有将<!DOCTYPE html>放在html文档的顶部。因为那一行，其他一切都正常工作，甚至是向上滚动时的动画，只是没有向下滚动，这太疯狂了。

【讨论】：