JavaScript 根據哪個 div 占據屏幕的大部分來觸發事件？

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 的事件？

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');
}