title: Realtime value display
body: <p>To perform some 'fade in' effect in the div's with class <code>subject</code> I have written the code below (in a .js document):</p>
  
  <pre><code>$(document).ready(function() {
      $(window).scroll( function(){
          $('.subject').each( function(i){
              var bottom_of_object = $(this).position().top + $(this).outerHeight();
              var bottom_of_window = $(window).scrollTop() + $(window).height();
              if( bottom_of_window &gt; bottom_of_object +700){
                  $(this).animate({'opacity':'1'},500);                  
              }    
          });    
      });    
  });
  </code></pre>
  
  <p>However, I am not very used to <code>scrollTop()</code>, so to understand it better, I would like that somehow in the <code>div</code> the value of the <code>scrollTop()</code> is displayed instantaneously when scrolling (although I will remove it after I have understood <code>scrollTop()</code> correctly). <strong>How may this real-time display be accomplished?</strong></p>
  
  <p>Any suggestion is welcome</p>