title: Detecting by how much user has scrolled
body: <p>I have an image pop-up ability on my website, in order to show users the full resolution picture when they click on a smaller version on the page.</p>
  
  <p>This is the current <code>CSS</code> that positions it:</p>
  
  <pre><code>div#enlargedImgWrapper {
      position: absolute;
      top: 30px;
      left: 55px;
      z-index: 999;
  }
  </code></pre>
  
  <p>The problem now is that if I click on an image further down the page, the window still appears in the top left corner of the page, where I can't see it until I scroll back up. I need it to appear relative to the window, whatever its current position relative to the document is.</p>
  
  <p><strong>Note:</strong> I don't want to use <code>position: fixed;</code> as some images might be taller than the screen, so I want users to be able to scroll along the image as well.</p>
  
  <p>My idea was to use JS to change the <code>top</code> value:</p>
  
  <pre><code>var scrollValue = ???;
  document.getElementById('enlargedImgWrapper').style.top = scrollValue+30 + 'px';
  </code></pre>
  
  <p>How can I detect by how much the user has scrolled down the page (<code>var scrollValue</code>)?<br>
  Or is there a 'better' way to do this?</p>
  
  <p><strong>Edit:</strong> if possible I would like to do this without jQuery.</p>