Colocar div en la parte superior actual de la pantalla

Quiero colocar un div de pantalla completa (bootstrap plegable) encima de la posición actual de la pantalla cuando se presiona un botón. Este botón está en algún lugar en el medio de la página, así que tendré que conocer la parte superior actual del documento ya que el usuario se ha desplazado por la página.

Mi CSS:

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

Mi HTML se ve así:

<!-- 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 />

Mi Jquery (justo antes de la etiqueta del cuerpo de cierre):

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

Desafortunadamente, esto no funciona. Cuando envío la variable 'superior' del script JQuery a la consola, obtengo un valor de 'objeto de ventana'. No es un número entero. Busqué mucho. Pensé que esto debería funcionar. ¿Qué estoy haciendo mal aquí?