javascript - 当你滚动到它时获取一组 div 的索引

Question

我有一组行类，当您滚动到它们的顶部时，我需要打印每个类的索引。

<div class="row">Hello world 1</div>
<div class="row">Hello world 2</div>
<div class="row">Hello world 3</div>
<div class="row">Hello world 4</div>
<div class="row">Hello world 5</div>
<div class="row">Hello world 6</div>

所以当我滚动到例如第 3 行我希望它打印“您滚动到 div nr 3”。

我试过类似的东西，但它没有按预期工作。

$(window).on("scroll", function() {
    $.each($(".row"), function(index, item) {
        if($(item).offset().top + $(item).height() >= $(window).height()) {
            console.log("You scrolled to div nr: " + $(item).index());
        }
    });
});

如何实现？

Answer 1

如果我正确理解您的要求，那么这应该可以满足您根据滚动位置打印当前 div(位于屏幕顶部)的要求:

$(window).on("scroll", function() {
    $.each($(".row"), function(index, item) {


    var top = $(item).offset().top
    var offset = $(window).scrollTop() // Use window.scrollTop rather than height

    if(offset + $(item).height() >= top) {
      console.log("You scrolled to div nr: " + $(item).index());
    }

    });
});

主要区别在于 $(window).scrollTop() 的使用，它根据窗口的当前滚动位置偏移了“顶部最可见的 div”的选择