Question

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

这是定位它的当前CSS：

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

现在的问题是，如果我点击页面下方的图像，窗口仍然会出现在页面的左上角，在我向上滚动之前我无法看到它。我需要它相对于窗口显示，无论它相对于文档的当前位置是什么。

注意：我不想使用position: fixed;，因为某些图片可能比屏幕更高，所以我希望用户也能够沿着图片滚动。< / p>

我的想法是使用JS来更改top值：

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

如何检测用户向下滚动页面的次数（var scrollValue）？或者有更好的方法来做到这一点吗？

编辑：如果可能的话我想在没有jQuery的情况下这样做。

Answer 1

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

Answer 2

document.getElementById('enlargedImgWrapper').scrollTop;

<强> MSDN

此属性的值等于当前的垂直偏移量   可滚动范围内的内容。虽然你可以设置这个   属性为任何值，如果指定的值小于0，则为属性   设置为0.如果指定的值大于最大值，则   property设置为最大值。

您可以内联设置此属性，但结果可能是   文档加载时不一致。

scrollTop property

检测用户滚动了多少

2 个答案: