Hiding an element with hide() causes a page "jump"

Question

I'm trying to create an effect where I display a big logo on page load. When the user scrolls pass the logo and navigation, I want to display a fixed nav bar with a smaller logo. I then want to hide the big logo so that when the user scrolls to the top they still see the fixed nav bar (i.e. the big logo and original navigation stay hidden).

However, when I remove a big block element with the .hide() property it causes the page to "jump" as the display:none property gets set. This reduces the usability of the page, as the location jumps the size of the element that was removed, potentially confusing users.

Is there a way I can get the effect I want, while still providing a smooth experience to the user? I've been thinking of potential options, but have been drawing blanks. Hoping you guys can inspire me :)

A simple JS fiddle can be seen here: http://jsfiddle.net/darudude/vA5WG/ (Note: You'll have to increase the result section to 720+px to get it to work properly - I'm still working on the responsive part)

The code in question:

function UpdateTableHeaders() {

    var menu       = $(".main_nav_menu"),
    offset_top     = menu.offset().top;

    var scrollTop  = $(window).scrollTop();

    if (scrollTop > (offset_top + menu.height()))
    {
        $(".clone").addClass("floating_header");
        $(".big_logo").hide();
    }
}
$(window).scroll(function(){
    UpdateTableHeaders();
});

Answer 1

You can try this ,

Add a new style

<style>
        .hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}
</style>

And change your JS to

$(".big_logo").addClass('hide');

Instead of 

$(".big_logo").hide();