Sticky footer con jQuery

[bs_notification type=»success» dismissible=»false»]Hay una nueva versión de este script. Ver el articulo. [/bs_notification]

A veces no queda bien que páginas con poco contenido que no llegan a llenar una ventana (en alto) tengan el pié en medio de la ventana y dejen el resto en blanco, y se prepara para que el pié siempre esté al final, es decir: Si la página ocupa más de una ventana, al final de la página. Si no, al final de la ventana. Podéis verlo en los ejemplos de Bootstrap.

Quería usarlo en la Web que estoy preparando para Paradise Sandbox, donde creo que sí toca utilizar esta técnica. Hasta ahora había utilizado un entramado de capas y propiedades CSS que nunca me ha gustado, pero por pereza de buscar o preparar alternativas y por no necesitar utilizarlo en muchas ocasiones, no me había esforzado mucho en el tema, con esta web es diferente. La hago por amor al arte, para lucirme y disfrutar de mi oficio sin prisas ni presiones.

Al buscar, lo primero que he visto es un Snippet de Chris Coyier en CSS-Tricks, pero no acababa de funcionar bien (yo diría que un pequeño problema de concepto) así que lo he modificado, y ahora funciona como toca.

function stickyFooter(){

	var	footerHeight	= 0,
		footerTop	= 0,
		$footer		= $("#footer");

	$footer.css("position","static");

	footerHeight	= 	parseInt($footer.height()) +
				parseInt($footer.css("padding-top")) +
				parseInt($footer.css("padding-bottom"));
	footerTop	= ( $(window).scrollTop() +
			    $(window).height() -
			    footerHeight) + "px";

	$footer.css("position","static");

	if ( ($(document.body).height()) < $(window).height()) {
		$footer.css({
			"position":"absolute",
			"top":footerTop,
			"width":"100%"
		});
	} else {
		$footer.css("position","static");
	}
}

La función stickyFooter(); debería ejecutarse al renderizar la página y cada vez que el tamaño de la ventana o el documento cambien, para eso se usará el listener resize del elemento $(window).

$(function() {
	$(window).resize(function() {
		stickyFooter();
	});
}

Y poco más, voy a seguir viendo Django.

Comentarios (3)

Muy interesante to sticky footer jquery, pero por poner alguna pega, tiene un pequeño problemilla que no sé si has notado.
En Firefox todo correcto, pero en Chrome, IE, Opera y Safari, la barra de scroll vertical se mantiene siempre visible, aunque no sea necesaria (lo puedes ver en http://www.paradise-engine.com/).
Soy nulo total en jquery, pero pienso que el problema está en el cálculo de footerTop, por pequeños errores de cálculo de los navegadores. Voy a hacer pruebas restándole algo (uno o varios pixels, o un porcentaje…). Si saco algo en claro te aviso.
En cualquier caso, muchas gracias por el aporte.

Hola.

Gracias por el comentario. Acabo de ver que es verdad lo que comentas, pero juraría que esto no pasaba en versiones anteriores de Chrome.

En cualquier caso, el código Javascript en principio estaría bien, y creo que se trata más de un problema de maquetación en esta página en concreto, porque en otras páginas en las que utilizo el mismo Javascript funciona bien.

Gracias por el aviso, si encuentras la solución y quieres que la publique, no dudes en comentarla.

Salud. : )

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.