Sticky footer con jQuery

Per impostare il cosidetto sticky footer (il footer fisso a fondo pagina) sono solito usare i CSS.

Su un progetto ho dovuto usare jQuery per impostarlo.

La soluzione è meno efficace e più lenta, ma come si dice spesso a "mali estremi, estremi rimedi".

Partiamo dall'HTML del footer:

<div id="footer">
    FOOTER
</div>
</body>
</html>

In sostanza è l'ultimo componente prima della chiusura del body.

Questo lo script jQuery:

$(document).ready(function () { 
    var footer = $("#footer");
    var pos = footer.position();
    var height = $(window).height();
    height = height - pos.top;
    height = height - footer.height();
    if (height > 0) {
        footer.css({
            'margin-top': height + 'px'
        });
    }
});

Questo farà tutto da solo.

In caso di connessione lenta, potreste ritrovarvi con il posizionamento in "differita" del footer; però funziona, e l'ho testato anche su iPad e Samsung Galaxy S4.

Enjoy!