javascript - 当图像位于堆叠层中时，如何检测屏幕上是否存在图像？

Question

考虑上面的图表，3 层在同一个容器中相互堆叠。

.container {
  position: relative;
}

.layer1, .layer2, .layer3 {
  position: absolute;
  top: 0;
  left: 0;
}

.layer 1 {
  z-index: 3;
}

.layer 2 {
  z-index: 2;
}

.layer 3 {
  z-index: 1;
}

假设每层将在 2 秒后隐藏。所以第 1 层将在 2 秒后不可见，然后第 2 层显示，然后在 2 秒后隐藏层，第 3 层显示。

第 3 层上有一个图像。我想对图像做一些事情——也许应用一些动画效果——在它显示的时候。

在传统布局中，当用户滚动到该区域时，我可以使用 WOW.js 之类的库将类应用于元素。像这样的布局，我不能使用 WOW.js 之类的。

如何检测图像在屏幕上“可见”以便我可以用它做些什么？

---

编辑：

我意识到这个问题的内容会影响我想要的答案。在我的实际布局中，每个布局都是在用户滚动屏幕时显示的。

我的实际布局受此启发： http ://scrollmagic.io/examples/advanced/section_wipes_manual.html

当用户滚动时，每一层都被显示出来。

标签： javascript

Answer 1

拿两个：scrollTop。您会在此处找到一些相关信息/示例，但本质上您可以做的是在用户向下滚动页面时显示您的元素。例如：

if(document.body.scrollTop > x) { /* do something */ }