jquery - 将 div 放在当前屏幕顶部

Question

我想在按下按钮时在当前屏幕位置的顶部放置一个全屏 div(可折叠 Bootstrap )。此按钮位于页面中间的某个位置，因此我必须知道文档的当前顶部，因为用户已滚动页面。

我的 CSS:

#overlayThema{
    position:absolute;
    background-color: silver;
}

我的 HTML 看起来像这样:

<!-- fullscreen div: -->
<div class="collapse" id="overlayThema">
   some content  
</div>

<!-- button which triggers the collapsable item: -->
<button id="poiThema" class="btn btn-default " data-toggle="collapse" data-target="#overlayThema"><?php echo $themaNaam; ?></button><br />

我的 Jquery(就在结束 body 标签之前):

<script>
$(document).ready(function(){
    var screenTop = $(document).scrollTop();
    $('#overlayThema').css('top', screenTop);
});
</script>

不幸的是，这不起作用。当我将 JQuery 脚本中的“top”变量输出到控制台时，我得到了“window object”的值。不是整数。我搜索了很多。我认为这应该有效。我在这里做错了什么？

Answer 1

实现目标的最佳方法是使用 position: fixed; 而不是使用 jQuery 使简单的想法过于复杂 :)