jquery - サイトの下部がスクロールしている間、ヘッダーは残ります

Question

私は、ヘッダー上をスライドする効果をゆっくりと示しながら、ユーザーがページの下部をスクロールできる、 Google Venturesサイトでの効果を達成しようとしています。

どうすればそれを達成できるのでしょうか？

どうもありがとう。

Answer 1

これは、ウェブサイトのセクションの位置を固定することで実現できます。このようなもの

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

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

Answer 2

次のようなことを試してください：

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;
}

作業コピーは次の場所にあります。

http://jsfiddle.net/mDP3y/