Javascript 根据哪个div占据了大部分屏幕来触发事件？

基本上，我有一个这样的div列表：

First div

seconddiv

我想让最可见的div影响在不同的常量div中显示的内容，如下所示：

第一个div的链接

（如果第一个div占据了页面的大部分）

然后

第二个div的链接

（如果第二个div滚动到）

---

如何让Javascript计算出正在查看哪个div（根据哪个div占用屏幕上最大%的像素空间进行计算），然后基于此触发“link”div事件？

编辑我之前的答案

您必须找出每个div离文档顶部的距离（无论窗口向下滚动多远，它都是一个固定的数字）：

divTop=$（'#1'）.offset（）.top

然后，找出窗口的滚动距离：

scrollTop=$（文档）.scrollTop（）

您还需要窗口的高度（即文档可见部分的高度）：

windowHeight=$（window）.height（）

并且，您需要每个div的高度：

divHeight=$（'#1'）.height（）

然后计算每个div相对于窗口顶部的开始位置，该位置可能是负数——如果窗口向下滚动超过div顶部——在这种情况下，使用Math.max将其设为零：

divTopInWindow=Math.max（0，divTop-scrollTop）

类似地，计算div的底部（相对于窗口顶部）。如果div超出窗口底部，则将其设置为窗口的高度：

divBottomInWindow=Math.min（windowHeight，divTop+divHeight-scrollTop）

最后，像这样计算每个div的可见百分比（实际上是分数，不是百分比，但不管怎样）：

percentVisible=（divBottomInWindow-divTopInWindow）/windowHeight

我还没有试过，所以可能会有错误，但这绝对是正确的方法

--------------------------下面的旧答案仅供参考------------------ 我认为你没有正确使用“触发事件”这个表达。听起来您只是想根据某些条件设置div的内容（即div1是否高于div2）

假设页面上加载了jQuery或Zepto：

if( $('#1').height() > $('#2').height() ) {
    $('#link').html('First div link');
}
else {
    $('#link').html('Second div link');
}

---

不完全是。。div的大小都不一样（大约有30个），所以更多的是关于屏幕上哪个比哪个更高。谢谢你的努力。