October 28, 2012

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

Question by 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.

Answer by Starx

Viewing this problem from overly simple point of view, using position: fixed can fix the main content website while others scroll.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!