Detecting by how much user has scrolled

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;

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

jQuery version:

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

What you need is this:

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

document.getElementById('enlargedImgWrapper').scrollTop;

MDN

This property's value equals the current vertical offset of the content within the scrollable range. Although you can set this property to any value, if you assign a value less than 0, the property is set to 0. If you assign a value greater than the maximum value, the property is set to the maximum value.

You can set this property inline, but the results might be inconsistent while the document is loading.

scrollTop property