Detectig by how much user has scrolled
===

I have an image pop-up ability on my website (see [this screenshot][1]), in order to show users the full resolution picture when they click on a smaller version on the page.

This is the current `CSS` that positions it:

    div#enlargedImgWrapper {
    	position: absolute;
    	top: 30px;
    	left: 55px;
    	z-index: 999;
    }

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.

<b>Note:</b> I don't want to use `position: fixed;` as some images might be taller than the screen, so I want users to be able to scroll along the image as well.

My idea was to use JS to change the `top` value:

    var scrollValue = ???;
    document.getElementById('enlargedImgWrapper').style.top = scrollValue+30 + 'px';

How can I detect by how much the user has scrolled down the page (`var scrollValue`)?<br />
Or is there a 'better' way to do this?

Thanks!

  [1]: http://assets.momo40k.ch/common/images/img_popup.jpg
