Detectig by how much user has scrolled
Posted
by
Sean
on Stack Overflow
See other posts from Stack Overflow
or by Sean
Published on 2012-07-07T09:13:40Z
Indexed on
2012/07/07
9:15 UTC
Read the original article
Hit count: 180
I have an image pop-up ability on my website (see this screenshot), 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.
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 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
)?
Or is there a 'better' way to do this?
Thanks!
© Stack Overflow or respective owner