獲取滾動高度並設置爲絕對定位元素的頂部

Question

我需要在燈箱中顯示一個圖像。

我已經給出了位置：早先修復。但是當圖像高度大於屏幕高度時，會導致問題。

問題是：

現在我需要使用absoulte概念。但問題在於，如果我在CSS中給出靜態「頂部」值，則當用戶單擊頁面底部的鏈接時，將在頁面頂部顯示lightbox圖片。

TO DO：

我需要設置頁面頂部的滾動高度：燈箱imageimage的價值。我試過scrollTop（）。但沒有得到。

如何做到這一點？

你能告訴我嗎？

編輯： 這裏是我的概念：http://jsfiddle.net/velmurugansp/F7z4f/1/

<div stle="position:relative"> 
<div style="height:1000px"> 
Top Contents 
</div> 
<img src="http://ftape.com/model/wp-content/uploads/2011/02/Caroline-Corinth-Models1-The-Model-Wall_4.jpg" width="630" height="630" style="position:absolute; top:0; left:-50%; margin-left:315px;display:block" id="img" /> 
</div> 

<script> 
scrollHeight=document.scrollTop(); 
$("#img").css("top",scrollHeight); 
</script> 

我需要給頂：1000像素;到「#img」。因爲前一個元素的高度是1000px;

Answer 1

要設置圖像的頂部位置，可以使用這樣的事情：

jQuery(document).ready(function() { 
    $(window).scroll(function() { 
     var scrollHeight = $(window).scrollTop(); 
     var img = $('#img'); 
     if (scrollHeight < $(document).height()-img.height()-20) { 
      img.css("top", scrollHeight); 
     } 
    }); 
}); 

jsfiddle

Answer 2

Yoy需要獲取body或html元素的scrollTop（），而不是其他元素。

Answer 3

你不能用CSS改變圖像的高度嗎？它可能會阻止所有jQuery的必要性。