title: Using jQuery to calculate offset in an absolutely positioned container
body: <p>All of my content is within an absolute container, <code>#content</code>, which is 100% width and height. So when scrolling, we are scrolling through the container, not the body.</p>
  
  <p>I am trying to caclulate the offset of a series of sections within the page like so:</p>
  
  <pre><code>$('.advance').on("click", function(){
       var nextSection = $(this).parent('.section').next('.section');
  
       var nextDistanceTop = nextSection.offset().top - 25;
  
       $("#content").animate({ scrollTop: nextDistanceTop });
  });
  </code></pre>
  
  <p>Because the container is absolutely positioned, the offset().top is giving me the offset from the top of the viewport. I need to calculate the offset relative to the top of the screen/header, or the scroll position. Any other workarounds to accomplish this?</p>
  
  <p>Here is an example:  <a href="http://jsfiddle.net/pkxDY/6/" rel="nofollow">http://jsfiddle.net/pkxDY/6/</a></p>