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>

所以当我滚动到例如我要打印的第三行“您滚动到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”的选择

Answer 2

如果您添加区分DIV的ID或类，这将使您能够使用Javascript中的scroll（）。假设您分别向divs section_1和section_2添加了一个类。然后，您可以使用以下代码：

window.addEventListener("scroll", function() {
  var elementTarget = document.getElementById("section-2");
  if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {
  alert("You've scrolled past the second div");
}
});

您可以在每个循环中将第2节的数字2动态更改。另外，在输出div时，请确保在尝试运行滚动功能之前将单个数字输入到类中。

滚动到它时获取一组div的索引

2 个答案: