kiểm tra xem phần tử đã được cuộn lên đầu

Question

Tôi muốn kiểm tra xem một phần tử có được cuộn lên trên cùng với độ lệch là ~ 100px hay không.

Tôi đã có một trang có 5 nội dung con và 2 lớp để tạo hình nền. Nó trông giống như thế này:

<div class="background1"> 
Content1 
</div> 
<div class="background2"> 
Content2 
</div> 
<div class="background1"> 
Content3 
</div> 
<div class="background2"> 
Content4 
</div> 
<div class="background1"> 
Content5 
</div> 

Bây giờ tôi muốn kiểm tra, khi một trong các lớp này đạt tới đỉnh bằng cách di chuyển

Đây là một trong trys cuối cùng của tôi:

$('.background1', '.background2').position(function(){ 
      if($(this).position().top == 100){ 
      alert('checkThis'); 
     } 
     }); 

Tôi nghĩ rằng đây là thử gần nhất của tôi bây giờ ... tất nhiên mã này là trong document.ready và ở phần cuối của mã của tôi ....

TLDR: Làm thế nào để kiểm tra xem một phần tử đã được cuộn lên đầu (và một số bù đắp) ?

Answer 1

Bạn phải lắng nghe cho sự kiện di chuyển, sau đó kiểm tra từng yếu tố so với khoảng cách hiện cuộn, một cái gì đó như: sự kiện

$(window).on('scroll', function() { 
    var scrollTop = $(this).scrollTop(); 

    $('.background1, .background2').each(function() { 
     var topDistance = $(this).offset().top; 

     if ((topDistance+100) < scrollTop) { 
      alert($(this).text() + ' was scrolled to the top'); 
     } 
    }); 
});