Phát hiện số lượng người dùng đã cuộn

Question

Tôi có khả năng bật lên hình ảnh trên trang web của mình, để hiển thị cho người dùng hình ảnh có độ phân giải đầy đủ khi họ nhấp vào một phiên bản nhỏ hơn trên trang.

Đây là hiện CSS mà vị trí nó:

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

Vấn đề bây giờ là rằng nếu tôi bấm vào một hình ảnh hơn nữa xuống dưới trang, cửa sổ vẫn xuất hiện ở góc trên bên trái của trang, nơi Tôi không thể nhìn thấy nó cho đến khi tôi cuộn lại. Tôi cần nó xuất hiện liên quan đến cửa sổ, bất kể vị trí hiện tại của nó liên quan đến tài liệu là gì.

Lưu ý: Tôi không muốn sử dụng position: fixed; vì một số hình ảnh có thể cao hơn màn hình, vì vậy tôi muốn người dùng có thể cuộn dọc theo hình ảnh.

Ý tưởng của tôi là sử dụng JS để thay đổi giá trị top:

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

Làm thế nào tôi có thể phát hiện bởi bao nhiêu người dùng đã cuộn xuống trang (var scrollValue)?
Hoặc có cách nào tốt hơn để thực hiện việc này không?

Chỉnh sửa: nếu có thể, tôi muốn thực hiện việc này mà không cần jQuery.

Answer 1

tinh khiết JavaScript sử dụng scrollTop và 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 phiên bản:

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

Những gì bạn cần là:

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

Answer 2

document.getElementById('enlargedImgWrapper').scrollTop; 

MSDN

giá trị của tài sản này bằng dọc hiện bù đắp của nội dung trong phạm vi cuộn. Mặc dù bạn có thể đặt thuộc tính này thành bất kỳ giá trị nào, nếu bạn chỉ định giá trị nhỏ hơn 0, thì thuộc tính được đặt thành 0. Nếu bạn chỉ định giá trị lớn hơn giá trị lớn nhất, thì thuộc tính được đặt thành giá trị lớn nhất.

Bạn có thể đặt thuộc tính này trực tiếp, nhưng kết quả có thể là không nhất quán trong khi tài liệu đang tải.

scrollTop property