Question

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

<div id="1">第一个div </div>

<div id="2">第二个div </div>

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

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

然后

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

我如何获取javascript以确定正在查看哪个div（通过哪个div占据屏幕上最大的像素空间百分比）然后根据该触发器触发“链接”div的事件？ / p>

谢谢！

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的内容（即div 1是否高于div 2）。

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

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