CODEWITHSUNDEEP
jquerycsshtmloverlay
John the Painter
John the Painter

Reputation: 2615

Overlay div - scroll as much as content

I'm working on this site: http://www.massobservation.org. If you click on 'Information' a div is displayed on top of the content, an overlay if you will. However, I'd like the site, when the overlay is active, to only be scrollable as far as the content of the overlay div. You can see however, that even though the overlay ends (the yellow background ends) the site still scrolls to the bottom.

An example of this is given here: http://cargocollective.com/montessori

Any ideas? Many thanks in advance.

Upvotes: 2

Views: 4184

Answers (3)

No Results Found
No Results Found

Reputation: 102745

As long as the overlay is not a child element of #top, this should work:

When the overlay opens, add this style to your main content:

#top {
    position: fixed;
}

When the overlay closes, remove the style.

Upvotes: 2

techfoobar
techfoobar

Reputation: 66663

When showing the overlay, you can do something like:

a) Turn off scroll for main document - $(document).css('overflow', 'hidden');

b) Set height of overlay to window's height - $(overlay).css('height', $(window).height()+'px');

c) Set overflow: auto for overlay - $(overlay).css('overflow', 'auto');

That should ensure that scroll works only till the end of content in the overlay.

Upvotes: 0

Ben Clayton
Ben Clayton

Reputation: 82219

What you could try is:

  • When the overlay is visible, set overflow: hidden; on the main content. I tried this on the div .work-section.
  • Ensure the overlay content is NOT a child of the main content. Right now it's a child of the .work-section div, move it outside.

This should mean that only the overlay content causes the browser to scroll.

Upvotes: 0

Related Questions