title: Make Javascript event happen only when scrolled to
body: <p>I currently have a JavaScript creating small pop ups when the page loads. I would like to make them appear only when the user scrolls down to where they appear (over a photo).</p>
  
  <p>Is this possible?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>jQuery(function(){
  // initialize of labels
  $('.labels a#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
      $('.labels a#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
          $('.labels a#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
              $('.labels a#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                  $('.labels a#label6').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                      $('.labels a#label5').fadeIn(100).effect('bounce', { times:3 }, 300);
                  });
              });
          });
      });
  });
  
  // dialog close
  $('.dialog .close').click(function() {
      $(this).parent().fadeOut(500);
      return false;
  });
  
  // display dialog on click by labels
  $('.labels a').click(function() {
      $('.dialog p').html( $(this).find('p').html() ).parent().fadeIn(500);
      return false;
  });
  
  // close dialog on click outside
  $('.container').click(function() {
      $('.dialog').fadeOut(500);
  });
  });
  </code></pre>