檢測用戶滾動的次數

我的網站上有一個圖像彈出功能，當用戶點擊頁面上的較小版本時，爲了向用戶顯示全分辨率圖片，檢測用戶滾動的次數

這是當前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。

來源

2012-07-07 Sean Bone

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

來源

2012-07-07 09:29:09 Engineer

非常感謝你這個偉大的答案！它完美的工作！ – 2012-07-07 09:35:35

document.getElementById('enlargedImgWrapper').scrollTop;

MSDN

該屬性的值等於當前的垂直可滾動範圍內內容的偏移量。儘管您可以將此屬性設置爲任何值，但如果將值分配爲小於0，則屬性將設置爲0.如果分配的值大於最大值，則屬性將設置爲最大值。

您可以設置此屬性內聯，但結果可能是在文檔加載時不一致。

scrollTop property

來源

2012-07-07 09:24:33 Rab

謝謝你的回答！你能解釋這行代碼嗎？ – 2012-07-07 09:25:39

看到這個鏈接https://developer.mozilla.org/en/DOM/element.scrollTop – Rab 2012-07-07 09:28:50

和這個http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx – Rab 2012-07-07 09:30:37

檢測用戶滾動的次數

回答

相關問題