Difference in slide animation of header and footer

Question

When I use a slide animation (in this case I used slideToggle), I noticed that there is a difference between sliding a header div and a footer div.

When sliding a footer, the content (in this case a h1) slides along nicely with the background. This is not the case with a header div. It seems that only the background is moving, while I would like the header to slide the same way as the footer does.

Please view the demo that I made on jsFiddle. Thank you.

Answer 1

Rather than use .slideToggle() which is convenient, you can animate the header element's top property so it slides off the screen rather than changing height.

For example you can save the state of the header using .data() and animate the header using .animate():

//set the initial state and bind click event handler
$('#toggleHeader').data('state', 0).bind('click',function(){

    //if the header is showing
    if ($(this).data('state') === 0) {

        //set state to not showing
        $(this).data('state', 1);

        //animate header element out-of-view
        $('#header').stop(true).animate({ top : -102 });
    } else {

        //set state to showing
        $(this).data('state', 0);

        //animate header element into view
        $('#header').stop(true).animate({ top : 0 });
    }
});     

Here is a demo: http://jsfiddle.net/xhFz7/3/

Answer 2

Jasper's fix does work but ThatSteveGuy's explanation is also correct. To fix the problem using ThatSteveGuy's reasoning and still keeping all of your old code, add this to the CSS:

#header h1 {
  position:absolute;
  text-align:center;
  width:100%;
  margin:0px;
  bottom:40px;
}

​as seen here http://jsfiddle.net/xhFz7/58/