javascript - 检测用户滚动了多少

Question

我的网站上有一个图片弹出功能，以便在用户单击页面上的较小版本时向用户显示完整分辨率的图片。

这是定位它的当前 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 的情况下执行此操作。

Answer 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';