Detectando por el desplazamiento del usuario

Question

Tengo una capacidad emergente de imagen en mi sitio web, para mostrar a los usuarios la imagen de resolución completa cuando hacen clic en una versión más pequeña en la página.

Esta es la corriente CSS que lo posiciona:

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

El problema ahora es que si hago clic en una imagen final de la página, la ventana todavía aparece en la esquina superior izquierda de la página, donde No puedo verlo hasta que retroceda. Necesito que aparezca en relación con la ventana, cualquiera que sea su posición actual relativa al documento.

Nota: que no quieren usar position: fixed; como algunas imágenes podrían ser más alta que la pantalla, por lo que desea que los usuarios puedan desplazarse a lo largo de la imagen también.

Mi idea era utilizar JS para cambiar el valor top:

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

¿Cómo puedo detectar por lo mucho que el usuario ha desplazado por la página (var scrollValue)?
¿O hay una "mejor" manera de hacer esto?

Editar: si es posible Me gustaría hacer esto sin jQuery.

Answer 1

puro JavaScript utiliza scrollTop y 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; 

https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

jQuery versión:

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

Lo que necesita es esto:

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

Answer 2

document.getElementById('enlargedImgWrapper').scrollTop; 

MSDN

El valor de esta propiedad es igual a la corriente de desviación vertical del contenido de dentro del rango de desplazamiento. Aunque puede establecer esta propiedad en cualquier valor, si asigna un valor inferior a 0, la propiedad se establece en 0. Si asigna un valor mayor que el valor máximo, la propiedad se establece en el valor máximo.

Puede establecer esta propiedad en línea, pero los resultados pueden ser inconsistentes mientras se está cargando el documento.

scrollTop property