Cuando estoy cargando contenido de otra página usando Ajax , mi pie de página salta debajo de mi encabezado antes de volver a bajar.
Reconozco que esto es causado por $('#container').remove(); lo que significa que esencialmente estoy quitando el contenedor antes de cargarlo en el nuevo contenedor.
¿Hay alguna manera de evitar que mi pie de página salte hacia arriba y hacia abajo entre las cargas de Ajax ?
Aquí está mi 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); }); He subido un ejemplo de lo que me está pasando en un servidor de prueba aquí .
Tuve que subirlo como snippet o pen no permite más de una página HTML
No retire #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); });No soy perfecto, pero creo que esto puede ayudarte a tener una idea. Puede establecer la altura mínima de #contenido o puede agregar una clase .stick_footer al pie de página inmediatamente después de eliminar el contenedor y eliminar la clase .stick_footer después de cargar los datos. lo siento por el mal inglés.
.stick_footer{ position:absolute; bottom:0;left:0;right:0; top:9em; }