Vi è mai capitato di litigare con il footer del sito su cui state lavorando, che non vuole saperne di stare sul fondo del layout che avete disegnato con tanta cura? jQuery ci viene incontro con uno script sintetico e facile da utilizzare.
In linea generale, utilizzare il Css Sticky footer può essereun buon modo per sistemare un footer bizzoso. Se il problema persiste, possiamo appunto risolverlo con l’intervento di jQuery.
Assicuratevi innanzitutto che l’id #footer sia l’ultimo elemento visibile nel <body> della vostra pagina, con il seguente Html:
Sticky Footer
Quindi nel Css, che sia in linea o esterno, scriviamo:
#footer { height: 100px; }Una volta caricata la pagina, viene controllato se il contenuto sia più corto dell’altezza della finestra. In questo caso, c’è uno spazio bianco al di sotto del contenuto prima della fine della pagina, affinchè il footer possa essere riposizionato alla base di essa. Se così non fosse, il footer può mantenere la sua normale posizione statica. Inseriamo dunque il seguente javascript nell’<head>:
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});Se anche questo metodo non dovesse funzionare (sono possibili conflitti con altri plugin come MooTools o Prototype), proviamone un altro a prova di bomba. Inserite nell’<head> il seguente codice:
Richiamate l’id nel <body>:
Lorem ipsum
Nella seguente riga, stabilite se posizionare il contenuto del footer a destra (right), sinistra (left) o centro (center). Al momento si trova a destra (right).
if(center == true){
$(element).css({
"right" : windowWidth / 2 - (((elementWidth + parseInt(elementPaddingleft) + parseInt(elementPaddingRight)) / 2))
});Alla prossima!