title: get new x/y positions of element after scroll using jQuery
body: <p>Lets say I have an <code>&lt;a&gt;</code> tag as follows:</p>
  
  <pre class="lang-HTML prettyprint-override"><code>&lt;body&gt;
      &lt;div class="wrapper"&gt;
          &lt;a href="#" class="a1"&gt;Click Me&lt;/a&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and my CSS are:</p>
  
  <pre class="lang-css prettyprint-override"><code>body{ padding:10px;}
  .wrapper { height:1000px; width:500px;}
  </code></pre>
  
  <p>Currently I am using <code>.offset()</code>  of Jquery to get the X/Y positions of <code>&lt;a&gt;</code> tag.</p>
  
  <pre class="lang-js prettyprint-override"><code>var offset = $(".a1").offset();
  var top = offset.top;
  var left = offset.left;
  </code></pre>
  
  <p>Now when I scroll the page and check of <code>&lt;a&gt;</code> tag's x,y co-ordinates, they remain the same, i.e. ineffective of page scrolling.<br>
  I want to get the new X,Y positions of <code>&lt;a&gt;</code> tag after scrolling the page related to the screen.<br>
  If this <code>&lt;a&gt;</code> tag gets hidden after scrolling down, I want its position in negative values.  </p>
  
  <p>Check this fiddle: <a href="http://jsfiddle.net/xQh5J/9/" rel="noreferrer">http://jsfiddle.net/xQh5J/9/</a></p>
  
  <p>Please help.</p>