title: How to dynamically check if elements hit top of window
body: <p>I have multiple elements below each other. I want to check when these elements hit the top of the window. I know how to do it with a single element, but not with multiple elements. </p>
  
  <p>Single element:</p>
  
  <pre><code>$(function(){   
  var itemOffset = $('.test').offset().top;
  
  $(window).scroll(function(){
      var scrollTop = $(window).scrollTop();
      if(scrollTop &gt;= itemOffset){
          console.log("item has reached the top");
          }
  });});
  </code></pre>
  
  <p>But now i have 5 elements with class 'test'. And if a .test element reaches the top, i want to say: div 1 has reached the top; div 2 has reached the top; etc. So it has to see which div it is (maybe fetch the attr ID or something?)</p>
  
  <p>This is what I had so far.</p>
  
  <pre><code>$(function(){   
  $('.test').each(function(){
      var itemOffset = $(this).offset().top;
  
      $(window).scroll(function(){
          var scrollTop = $(window).scrollTop();
          var toet = itemOffset - scrollTop;
  
          if(scrollTop &gt;= itemOffset){console.log("New div has reached the top!")}
      });     
  });});
  </code></pre>
  
  <p>Help is greatly appreciated!</p>