jquery - 固定要素の高さの設定

Question

デフォルトのページ機能を壊すページに取り組んでいます。次のように動作します。

最初にページのスクロールを開始すると、背景とスプラッシュが固定されている間、スプラッシュのような画面がフェード ダウンします。2400px などをスクロールすると、スクロールは通常どおりに動作し始めます。これは私が取り組んでいるソリューションです:

<div class="wrapper">
   </p>Rest of the content</p>
</div>
<div class="splash" >
   <p>Splash-content that has 100% height and width</p>
</div>

ページをロードすると、両方の div: が位置固定に設定されます。次に、スクロール イベントをリッスンし、ページがスクロールした距離に基づいてスプラッシュの不透明度を設定します。スプラッシュの不透明度が 0 になるまでページがスクロールされたら、ラッパーを display: static および margin-top: 2400 に設定して、通常のスクロール動作に移行します。（これはaddClass(fixed)以下を使用して行われます。

$(document).scroll(function(){
    var scrolllength = parseInt($(window).scrollTop());
    switch(true) {


        //y2004 starts to show
        case (scrolllength > y2004):
            console.log('above 2004 bottom')
            $('.wrapper').removeClass('fixed');
            break;


        //y2003 is fully visible
        case (scrolllength > y2003bottom):
            console.log('below 2003 bottom')
            $('.wrapper').addClass('fixed')

            $('.splash').css('display','none');
            $('.text').fadeIn('fast');

            break;

        //scrolling up, splash starts to show again
        case (scrolllength < y2003bottom && scrolllength > 0):
            console.log('above 2003 bottom '+scrolllength)
            var splashopacity = ((y2003bottom -scrolllength)/y2003bottom );
            $(".splash").css('opacity',(splashopacity));
            //show the splash again
            $('.splash').css('display', 'block');
            $('.text').fadeOut('fast');
            break;


        //default
        default:
            console.log(scrolllength);
            return;
    }
});

固定 css: .fixed{ 位置: 固定; 上: 0; 幅: 100%; マージントップ: 0; }

このアプローチはうまく機能します。唯一の問題は、ラッパーを「固定」に設定すると、高さが失われることです。これにより、スクロールが不可能になります。.wrapper の内容に基づいてドキュメントのウィンドウ サイズを拡大したいと考えています。または、同様の目標を達成する他のソリューション。Css が推奨されますが、javascript も問題ありません。