CODEWITHSUNDEEP
jquerycss
Rob
Rob

Reputation: 149

Place div at current top of screen

I want to place a fullscreen div (collapsable bootstrap) on top of the current screen position when a button is pressed. This button is somewhere at the middle of the page, so I'll have to know the current top of the document since the user has scrolled the page.

My CSS:

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

My HTML looks like this:

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

My Jquery (just before the closing body tag):

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

This, unfortunately, does not work. When I output the 'top' variable from the JQuery script to the console, I get a value of 'window object'. Not a integer. I seached a lot. I thought this should work. What am I doing wrong here?

Upvotes: 0

Views: 66

Answers (1)

Andy Holmes
Andy Holmes

Reputation: 8087

The best way to achieve what you are after is to use position: fixed; instead of overcomplicating a simple idea with jQuery :)

Upvotes: 1

Related Questions