jquery - jQueryスクロールダウン100％、要素を上に再配置：0、ちらつきの原因

Question

私には2つの要素があります。1 つ目はブラウザの 100% の高さを使用し、配置されてfixedいます。2 番目の要素にはtop: 100%;、1 番目の固定要素の下に表示される位置があります。

これを設定して、スクロール時に 2 番目の要素が 1 番目の要素の上をスライドできるようにしました。これまでのところ問題はありません。

しかし今、.remove()2番目にスクロールした後、1番目の要素が必要です。したがって、2 番目は 1 番目の要素を置き換えます。

これを行うtop: 0には、最初の ではなく に2 番目の要素を再配置する必要がありtop: 100%ます。次にscrollTop(0)、2 番目の要素の上部を表示する必要があります。これは、再配置されたためです。

ただし、この最後の手順により、ページがちらつきます (10 回中 9 回)。どうすればこれを解決できますか?

これを達成するためのよりクリーンな方法はありますか？

更新: これまでのところ、ちらつきは Safari でのみ発生しますが、Chrome では問題なく発生します。そして Firefox では動作しません.. これは単なる基本的な jQuery ですよね??

ここに私のjQueryコードがあります:

$(window).scroll(function() {
    if ($('body').scrollTop() >= $('body').height()) {
        $('#elem-2').css({top: '0'});
        $('body').scrollTop(0);
        $('header').css({position: 'fixed'});  // header inside #elem-2
        $('#elem-1').remove();
    }
});

そしてCSS：

#elem-1 {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: #00a1b1;
}

#elem-2 {
    position: relative;
    top: 100%;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

header {
    position: relative;
    top: 0;
    width: 100%;
    height: 130px;
    display: block;
}

誰？