jQuery: footer in fondo alla pagina

Il footer sempre in fondo alla pagina è una caratteristica piuttosto ardua da ottenere con i soli CSS. Fortunatamente jQuery ci viene in aiuto con una semplice tecnica che ci consente di ottenere l'effetto voluto. Vediamone insieme i dettagli.

La marcatura d'esempio potrebbe essere:

<div id="footer">...</div>

A livello degli stili CSS è necessario che il footer abbia un'altezza:

#footer { height: 100px; }

Con jQuery dobbiamo intercettare gli eventi scroll e resize dell'oggetto window è posizionare ogni volta il footer in fondo alla pagina:

$(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);

});