javascript - スクロール中にdivの高さをスケーリングし、上部に固定する方法

Question

この手法が以前に使用されているのを見たことがあると確信していますが、それが何と呼ばれているのか理解できないか、オンラインから学ぶための適切な例を見つけることができません. 基本的な質問のようです：

ページが読み込まれるとサイトのロゴが大きく表示され、画像が特定のサイズに達するまでユーザーが下にスクロールすると小さくなり、ページの上部に固定される1ページのWebサイトを作成したい.サイトのメニューはそのすぐ下にあり、ページの上部にも固定されています。

私はこれを機能させるためにいくつかの方法を試しました。私が現在設定している方法では、その下のコンテンツがヘッダーの下に「すばやく」スクロールし、その下に隠れます。

ここにJSFiddleがあります

マークアップ

</div>
<nav id="nav">
    <ul>
        <li><a href="#section_1">Section 1</a>
        </li>
        <li><a href="#section_2">section_2</a>
        </li>
        <li><a href="#section_3">section_3</a>
        </li>
        <li><a href="#section_3">section_3</a>
        </li>
    </ul>
</nav>
</header>
<div id="main">
    <div class="content_section" id="section_1">Section 1!</div>
    <div class="content_section" id="section_2">Section 2</div>
    <div class="content_section" id="section_3">Section 2</div>
    <div class="content_section" id="section_3">Section 3</div>
</div>

CSS

#header {
    width:100%;
    text-align: center;
    position:fixed;
}
#header img {
    height:100%;
}
#logo_container {
    height:200px;
    /*temporary -- this is usally supplied by height of the image inside it */
}
nav {
    background-color: #E9E9E9;
    display: inline-block;
    margin: 30px 0;
    text-align: center;
    width: 100%;
}
nav ul, nav li {
    margin: 0;
    list-style:none;
    list-style-image: none;
}
#main {
    display:inline-block;
    padding-top:800px;

}
.content_section {
    display:block;
    border-top:5px black solid;
    height:200px;
    margin-bottom:20px;
}

および Javascript:

$(function () {
    function resizeTopLogo() {
        var winScrollTop = $(window).scrollTop() + 0,
            zeroSizeHeight = $(document).height() - $(window).height(),
            newSize = Baseheight * (1 - (winScrollTop / zeroSizeHeight) * (2 / 3));
        Node.css({
            height: newSize
        });
        $("#main").css({
            paddingTop: $("#header").height()
        })
    }

    var
    Node = $('#logo_container'),
        Baseheight = Node.height();
    $(window).scroll(function () {
        resizeTopLogo();
    });
});

したがって、私の質問は、ヘッダーが本来あるべき高さに達するまで、縮小サイズのヘッダーを使用して下部のコンテンツをスクロールし、ヘッダーとは独立してスクロールする方法です。(もちろん、ユーザーがページの一番上までスクロールしたときに元の状態に戻らなければなりませんが、それはまったく別の話かもしれません)。

明確にするために、ページの上部に div を固定することについて質問しているだけです。私はそれを行うことができます。ページの上部に固定しながら、コンテンツをその下にうまくスクロールさせながら、画像のサイズを縮小したいと考えています。

また、ヘッダーの下の同じ固定 div にコンテンツを配置しようとしましたが、コンテンツはスクロールしません。ダミーコンテナを使ってスクロールさせてみたのですが、コンテンツの一番下が一貫して表示されず、不必要にハッキーに見えました。