CODEWITHSUNDEEP
javascriptjquerycsspositioning
Andrew
Andrew

Reputation: 43113

jQuery: Position a div to fill the visible portion of a container div with overflow

I'm having trouble getting an overlay to appear on top of the visible portion of another div. The problem is, the container div has overflow, and if the user has scrolled inside that div, the overlay will not cover the scrolled portion. My question is: how can you position a div to fill the visible portion of another div using jQuery - or, alternatively, is there a way to accomplish this using just CSS?

Here is a jsFiddle demonstration, and here's the markup:

HTML

<div class="container">
    <div class="overlay"></div>
    <div class="content">
        <p>Content here</p>
        <p>Overflow content here</p>        
    </div>
</div>

CSS

div.container { position: absolute; height: 100px; width: 100px; overflow-y: auto; }
div.overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #F00; opacity: 0.5; }
div.content p { margin-bottom: 100px; }

and JS (load on DOM Ready)

$('div.container').click(function(){
    $('div.overlay').toggle();
});

Upvotes: 1

Views: 770

Answers (3)

Samuel Caillerie
Samuel Caillerie

Reputation: 8275

You can use the DOM property scrollHeight :

$('div.container').click(function(){
    $('div.overlay').css("height", this.scrollHeight).toggle();
});

http://jsfiddle.net/p6k2Z/1/

EDIT :

In order to just overlay the visible portion, you can use this :

$('div.container').click(function(){
    $('div.overlay').css({
        top: this.scrollTop,
        height: $('div.container').css("height")})
    .toggle();
});

http://jsfiddle.net/p6k2Z/3/

Upvotes: 0

jingtao
jingtao

Reputation: 513

Assuming you really want to cover only the visible portion:

http://jsfiddle.net/GNCaT/1/

<style type="text/css">
div.overlay { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height:100px; /* fixed height, set by CSS or javascript, no bottom */
    background: #F00; 
    opacity: 0.5; 
}
</style>

<script>
$('div.container').click(function(){
    $('div.overlay').css('top', $('div.container').scrollTop() + 'px').toggle();
});​
</script>

This will position the overlay to the top of the visible portion of the container.

Upvotes: 0

Bruno
Bruno

Reputation: 5822

In order to achieve what you were asking for I did the following

CSS

.container {
    /* setting this to relative means 
       overlay is positioned relative to its parent */
    position: relative; 
}
.overlay {
    /* element taken out of normal flow */
    position: absolute;
    /* removed bottom and right properties otherwise
       updating top property has no effect */
    height: 100px;
    /* When scrollbar appears width decreases to less than
       100px hence having to set to 100% to allow automatic calculation */
    width: 100%;
}

JavaScript

Using jQuery I now set the top property appropriately

$(".container").scroll( function( ) {
    $(".overlay").css({ top: $(this).scrollTop( ) });
});

Fiddle here

Upvotes: 1

Related Questions