CODEWITHSUNDEEP
javascriptjqueryhtmlcss
darudude
darudude

Reputation: 541

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

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();
});

Upvotes: 4

Views: 3827

Answers (3)

Lachezar Raychev
Lachezar Raychev

Reputation: 2113

Maybe it is because a different browser - margin/padding thing. Have you tried to add this to the body element (or to the container element if it inherits some margins/paddings)

body{
    margin:0;
    padding:0;
    width:100%;
}

Upvotes: 1

Dimag Kharab
Dimag Kharab

Reputation: 4519

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();

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Use visibility:hidden then

$(".big_logo").css('visibility','hidden');

Upvotes: 1

Related Questions