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

Question

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

<div id="1"> 第一分区</div>

<div id="2"> 第二分区</div>

我希望最明显的div 影响不同常量div 中显示的内容，如下所示：

<div id="link"> 第一个div的链接</div>（如果第一个div占据了大部分页面）

然后

<div id="link"> 第二个div的链接</div>（如果第二个div滚动到）

我如何让 Javascript 找出正在查看哪个div（计算方法是哪个占用屏幕上最大百分比的像素空间），然后基于此触发"链接"div 的事件？

Answer 1

编辑我之前的答案。

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

divTop = $('#1').offset().top

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

scrollTop = $(document).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 1 是否高于div 2）设置div 的内容。

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

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