jQuery scroll down 100%, re-position element to top: 0, causes flicker
<p>I have two elements. The 1st one uses 100% height of the browser, and is positioned <code>fixed</code>. The 2nd element has a position <code>top: 100%;</code> to appear beneath the 1st fixed one.</p>

<p>I set this up, so the 2nd element can slide over the 1st one, when scrolling. No problems so far.</p>

<p>But now, I want to <code>.remove()</code> the 1st element, after I scrolled to the 2nd. So the 2nd replaces the 1st element.</p>

<p>In order to do this, I have to re-position the 2nd element to <code>top: 0</code>, instead of the initial <code>top: 100%</code>. I then also have to <code>scrollTop(0)</code> in order to see the top of the 2nd element, because it got re-positioned.</p>

<p>However, this last step causes the page to flicker (9 times out of 10)! How can I solve this?</p>

<p>Is there a cleaner way to achieve this?</p>

<p>UPDATE: the flicker only occurs in Safari so far, Chrome does it flawlessly. And in Firefox it doesn't even work.. This is just basic jQuery, right??</p>

<p>Here's my jQuery code:</p>

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

<p>And the CSS:</p>

<pre><code>#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;
}
</code></pre>

<p>Anyone?</p>
