0

我有一个大的垂直滚动，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（高度未知）的最佳方法是什么？

4

1 回答 1

1

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

于 2013-05-28T16:41:07.640 回答