0

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

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

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

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

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

接着

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

我如何让 Javascript 确定正在查看哪个 div（计算哪个在屏幕上占用了最大 % 的像素空间），然后基于此触发“链接”div 的事件？

4

1 回答 1

0

编辑我以前的答案。

您必须找出每个 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');
}
于 2012-05-31T14:40:29.750 回答