Sean Sean - 6 months ago 20
CSS Question

Detecting by how much user has scrolled

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.

This is the current

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.

Note: 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

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

How can I detect by how much the user has scrolled down the page (
var scrollValue

Or is there a 'better' way to do this?

Edit: if possible I would like to do this without jQuery.


Pure JavaScript uses scrollTop and scrollLeft:

var scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

jQuery version:

var scrollLeft = $(window).scrollLeft() ;
var scrollTop = $(window).scrollTop() ;

What you need is this:

document.getElementById('enlargedImgWrapper') = (scrollTop+30) + 'px';