Header stays while bottom of the site scrolls

Question

I am trying to achieve the effect they have on google ventures site, where the user can scroll the bottom of the page while it slowly shows the effect of sliding over the header.

Any idea how I can achieve that?

Many Thanks.

Answer 1

Try something like this:

HTML:

<div class="container">
    <div class="header">

    </div>

    <div class="content">

    </div>
</div>

CSS:

div
{
    width: 300px;
}

.container
{
    position: relative;
    height: 1000px;
}

.header
{
    position: fixed;
    top: 0;
    z-index: 999;
    height: 200px;
    background-color: green;
}

.content
{
    position: relative;
    z-index: 1000;
    margin-top: 200px;
    height: 100%;
    background-color: blue;
}

Working copy can be found here:

http://jsfiddle.net/mDP3y/

Answer 2

You can do this by making a section of website position fixed. Its something like this

<div class="sec1"></div> 
<div class="sec2"></div>

.sec1 {
 position: fixed;
....
....
}