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