javascript - How to position popup window relative to the window top?

Question

I created a basic lightbox like thing, when a thumbnail is clicked, a popup window appears. How can I detect the top position with jQuery, so when the popup div appears it's always e.g. 200px from the window's top?

$('#thumbs img').click(function(){
  $('.popup').fadeIn(300);
  $('#dark-overlay').fadeIn(300);
});

$('#dark-overlay').click(function(){
  $(this).fadeOut(300);
  $('.popup').hide();
});

Example: http://jsfiddle.net/EXT4H/1/

Answer 1

这是工作的 jsfiddle：http: //jsfiddle.net/kcG9W/。您需要计算窗口的滚动偏移量，这将使顶部看起来像 0px，然后将其加上 200，使顶部看起来像 200px。

$('#thumbs img').click(function(){
    $('.popup').fadeIn(300);
    $('#dark-overlay').fadeIn(300);
    var top = $(window).scrollTop() + 200 + 'px';
    $('.popup').css({top:top});
});