javascript - 滚动到一组div时获取它的索引
问题描述
我有一组行类,当您滚动到它们的顶部时,我需要打印每个类的索引。
<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());
}
});
});
如何做到这一点?
解决方案
如果我正确理解您的要求,那么这应该可以满足您根据滚动位置打印当前 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”的使用
推荐阅读
- c# - 将文件保存到特定的本地化并将它们显示为 ListBox [WPF] 中的项目
- swift - Swift 只能从 firebase 中看到一个值(检索数据)
- c# - 是否有适当的解决方法来重载需要采用相同值类型的方法,还是应该避免?
- windows - 更新显卡不更新opengl32.dll
- php - 如何从laravel中的外键中提取数据?
- c++ - 需要一些帮助来理解类继承(C++)
- c - A96开发板 GPRS C SDK 搭建环境安装Windows
- python - 检查目标时出错:预期 dense_3 有 2 个维度,但得到了形状为 (10, 10, 2) 的数组
- javascript - 解决在chrome中运行的tensorflow js的“未捕获(承诺)TypeError:fs.writeFile不是函数”的替代方法
- beautifulsoup - 如何在python中用汤检索最后一个页码