javascript - 如何在滚动时跟踪 div 编号？

Question

假设我有不同大小的 div：

<div class="mydiv" style="height:500px;">
</div>
<div class="mydiv" style="height:212px;">
</div>
<div class="mydiv" style="height:58px;>
</div>

我怎样才能使它在我向下滚动时知道当前显示/或在顶部的# div？假设一次只能存在 1 个活动 div（最上面的 div）。最好使用 JQuery。

Answer 1

我想你可能正在寻找这样的东西

http://foundation.zurb.com/docs/components/magellan.html

还有更多类似且现成的。

Answer 2

或者，如果您不想要第三方库的任何额外依赖项，您可以订阅$('#container').scroll(eventHandler)event 并循环遍历e.target的子项以找到位于容器顶部的那个。

$(".container").scroll(function (e) {
    var elementOnTheTop;
    $(e.target).children().each(function (index, element) {
        var $element = $(element);
        if ($element.position().top <= 0 && $element.height() > 0) {
            elementOnTheTop = $element;
        }
    });

    //elementOnTheTop is what you are looking for
});

演示：JSFiddle