Ajaxのロードによりコンテンツがジャンプする

Question

Ajaxを使用して別のページのコンテンツを読み込んでいるときに、フッタが下に移動して元に戻ります。

これは、$('#container').remove();によって引き起こされたものです。つまり、新しいコンテナにロードする前にコンテナを削除しています。

フッタがAjaxの間で上下にジャンプするのを止める方法はありますか？

は、ここに私のjQueryの

$('nav a').on('click', function(e) { 
    e.preventDefault(); 
    var url = this.href; 
    $('nav a.highlight').removeClass('highlight'); 
    $(this).addClass('highlight'); 
    $('#container').remove(); 
    $('#content').load(url + ' #container').hide().fadeIn(3500); 
}); 

I'vは、テストサーバーhereに私に何が起こっているかの例をアップロードしています。
スニペットとしてアップロードする必要がありました。または、複数のHTMLページを許可していないペンです。

Answer 1

は#container

$('nav a').on('click', function(e) { 
    e.preventDefault(); 
    var url = this.href; 

    $('nav a.highlight').removeClass('highlight'); 
    $(this).addClass('highlight'); 

    //$('#container').remove(); 
    $('#content').load(url + ' #container').hide().fadeIn(3500); 
}); 

Answer 2

私は完璧ではありませんが、これはあなたのアイデアを得るのに役立つと思います。あなたは#contentの分の高さを設定することもできますし、すぐにコンテナを削除した後クラス.stick_footerへフッターを追加して、ロードされたデータの後に .stick_footer クラスを削除することができます。 申し訳ありませんが悪い英語。

.stick_footer{ 
    position:absolute; bottom:0;left:0;right:0; top:9em; 
}