4

我在彼此下方有多个元素。我想检查这些元素何时到达窗口顶部。我知道如何使用单个元素，但不知道如何使用多个元素。

单元素：

$(function(){   
var itemOffset = $('.test').offset().top;

$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop >= itemOffset){
        console.log("item has reached the top");
        }
});});

但现在我有 5 个带有“测试”类的元素。如果 .test 元素到达顶部，我想说： div 1 已到达顶部；div 2 已到达顶部；等等。所以它必须查看它是哪个 div（也许获取 attr ID 或其他东西？）

这就是我到目前为止所拥有的。

$(function(){   
$('.test').each(function(){
    var itemOffset = $(this).offset().top;

    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        var toet = itemOffset - scrollTop;

        if(scrollTop >= itemOffset){console.log("New div has reached the top!")}
    });     
});});

非常感谢您的帮助！

4

2 回答 2

2

我对到达顶部的意思有点模糊，我的意思是它是滚动到视野之外还是可见还是正好在顶部。也就是说，我认为一旦得到答案，数学就很简单，你真正需要做的是检查滚动函数中的每个 div.test 。您可以在需要记录时获取 id 甚至内部文本或任何内容。

这将告诉你哪些是可见的时期，如果你想完全可见那是一个不同的计算。您必须记住的一件事是，滚动事件的触发频率比您想象的要高。

$('#container').scroll(function(){
    $('.test').each(function(){
        var itemOffset = Math.abs($(this).offset().top);
        var height = $('#container').height();
        if (itemOffset > 0 && itemOffset < height) {
             alert($(this).attr('id'));
        }
    });
});

在这里摆弄

于 2012-11-30T15:24:07.153 回答
1

只需检查滚动位置是否大于元素顶部位置（y 位置）。

$(window).scroll(function(){
  if ($(window).scrollTop() > $('#element').position().top) {
    console.log('#element hits top!');
  }
});
于 2016-01-28T10:42:09.373 回答