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

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

• javascript
• jquery
• html
• css

• try setting opacity to 0 instead of hide... – Shashank Commented Feb 14, 2014 at 4:55
• That is the equivalent of visibility:hidden which is not the affect I want - I dont want the white space at the top when the user scrolls up – darudude Commented Feb 14, 2014 at 5:30
• Just set your logo to position absolute or fixed from the begining, it won't be in the flow so hiding it won't be changing the flow... i'm on iPad right now though so it's hard for me to e with a nice example. – Laurent S. Commented Nov 20, 2015 at 20:48

3 Answers 3

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

Use visibility:hidden then

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

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%;
}