Javascript 检查div不在覆盖后面时是否可见

我有一个页面，上面有一个覆盖图（产生加载效果），后面有一个内容div。当content div（要测试的id content）在屏幕上可见时（当加载不可见时），我想触发一个函数

我正在使用.is（':visible'）jQuery函数，但该函数仅检查div的可见性或显示

我需要检查用户何时可以看到content div

    <div class="container">
        <div id="overlay">
            <br><br>
            <img src="http://www.cariblist.com/loader/new_loading2.gif" style="width: 80px; margin-left: 40%;" />
        </div>
        <div id="content-to-test">
            <br>This is the content
        </div>
    </div>

这就是内容

完整示例：

---

单击“切换覆盖可见性”或/和“切换内容可见性”检查标签“内容是：”状态（可见或不可见）

因此，如果我理解正确，您希望检查覆盖是否可见以及是否与当前分区重叠。对吗？这不是一个准确的问题，请更好地定义您的目标。它应该在视口中还是完全可见，还是？无法理解。请详细说明。设置计时器，检查两个条件：覆盖不可见+内容可见。如果两个需求都符合，则触发所需的功能。看不到问题。无论我将覆盖设置为可见还是不可见，content div都正确地报告为在代码中可见。