Scroll a 100% height div over top of main content area while scrolling?

Dustin McGrew

What I’m trying to do is a little hard to explain. I want to have a “panel” that would be 100% of the window height and is overlaid on top of the main content of the website. What I want to happen is to have the main website content locked to the top of the browser window and have this “panel” over top of it. This part is easy just using z-index. The problem I’m having is getting the main content of the site to stay fixed at the top of the browser window and when the user scrolls down only the “panel” slides up to reveal the main part of the website below it. Once the panel has cleared the top of the browser window I want the main part of the site to scroll as usual. I would like this to be driven by jQuery.

Here’s the HTML I have:

This is an overlay that needs to slide over top of the main content when the user scrolls down.

This is the main content of the website.

And some CSS:

html, body {height:100%;}

.panel {height:100%; background-color: rgba(186,85,85,0.38); position: relative; z-index:1;}

.main {position: absolute; top:0px; min-height: 1500px;}

EDIT: Think of this effect like a curtain rising on a stage. The stage stays in place while the curtain rises.