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

我需要在燈箱中顯示一個圖像。獲取滾動高度並設置爲絕對定位元素的頂部

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

問題是：

現在我需要使用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;

來源

2013-05-31 Vel Murugan S

給我們一個小提琴:) – Alvaro

這就是我被擊中的地方。我需要知道儀式的滾動部分的高度的方式。希望你現在可以明白我的觀點，@Sano。 –

這就是我需要的。非常感謝@Stano。如果你把你的答案作爲答案，我會把它作爲「接受答案」。 –

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

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

來源

2013-05-31 12:00:17 Stano

Tx @Stano。我等待的解決方案：P –

很高興幫助Vel;） – Stano