Question

我有一个大的垂直滚动，DIV堆叠在其他DIV之上。我想弄清楚用户当前正在看哪个DIV。我设法使用路标做得相当好，但我允许用户在DIV中加载更多内容（这使得它们更高）并且似乎搞砸了航点。

以下是我的航点代码的样子，我为每个DIV都有其中一个：

$(function() {

var $things = $('#infoWrapper');

$things.waypoint(function(direction) {
  if (direction === 'down') {
    //do stuff
  }
}, { offset: function() {
    return $(this).height()-($.waypoints('viewportHeight') / 3);
  }
});

$things.waypoint(function(direction) {
  if (direction === 'up') {
    //do stuff
  }
}, {
  offset: function() {
    return -$(this).height()+($.waypoints('viewportHeight') / 1.2);
  }
});

});

我想知道是否有更好的方法来做到这一点;也许测试DIV以查看哪个DIV具有viewportHeight的最高百分比（因此如果用户滚动以使DIV1具有20％而DIV2具有40％则运行DIV2代码等）。

了解当前正在查看哪个DIV（未知高度）的最佳方式是什么？

Answer 1

我建议你查看完全为此制作的jQuery-Visible plugin。它允许我们快速检查元素是否在浏览器可视化视口内，而不管滚动位置如何。如果用户可以看到此元素，则该函数将返回true。从那里你可以确定哪个占据了视口的较大部分 - 这应该是简单的数学。这样您只能测试实际可见的项目。

知道哪个Div在viewportHeight内（以及多少）

1 个答案: