Обнаружение того, сколько пользователь прокрутил

У меня есть возможность всплывающего изображения на моем веб-сайте, чтобы показать пользователям изображение с полным разрешением, когда они нажимают на меньшую версию на странице.

Это текущий CSS, который позиционирует его:

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

Теперь проблема заключается в том, что если я нажимаю на изображение дальше по странице, окно все равно появляется в верхнем левом углу страницы, где я не вижу его, пока не прокручу резервную копию. Мне нужно, чтобы он отображался относительно окна, независимо от его текущей позиции относительно документа.

Примечание. Я не хочу использовать position: fixed;, так как некоторые изображения могут быть выше экрана, поэтому я хочу, чтобы пользователи могли прокручивать изображение.

>

Моя идея состояла в том, чтобы использовать JS для изменения значения top:

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

Как определить, насколько пользователь прокрутил страницу вниз (var scrollValue)?
Или есть "лучший" способ сделать это?

Изменить:, если возможно, я хотел бы сделать это без jQuery.

Ответ 1

Чистый JavaScript использует scrollTop и 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 версия:

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

Что вам нужно:

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

Ответ 2

document.getElementById('enlargedImgWrapper').scrollTop;

MSDN

Это значение свойства равно текущему вертикальному смещению контента в пределах диапазона прокрутки. Хотя вы можете установить это свойство для любого значения, если вы присвоите значение меньше 0, свойство устанавливается на 0. Если вы назначаете значение больше максимального значения, свойство установлено на максимальное значение.

Вы можете установить это свойство в строке, но результаты могут быть несовместимо во время загрузки документа.

свойство scrollTop