Javascript 如何相对于窗口顶部定位弹出窗口？

我创建了一个基本的类似灯箱的东西，当单击缩略图时，会出现一个弹出窗口。我如何用jQuery检测顶部位置，这样当弹出div出现时，它总是离窗口顶部200px

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

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

---

示例：

以下是正在工作的JSFIDLE:。您需要计算窗口的滚动偏移量，这将使顶部看起来像0px，然后再加上200，使顶部看起来像200px

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

---

我不完全确定你的意思，但是

position:fixed

可能会这样做。我希望弹出窗口相对于窗口的可视区域显示200px。问题是，如果你点击第五个缩略图，弹出窗口就会出现在文档的顶部，而它看起来并不伟大，这就是我的意思！谢谢