Corrigindo objetos fixos em rodapés de página

O problema comum de objetos fixos rolando sobre rodapés tem uma solução simples. Por exemplo, vamos considerar uma caixa fixa de “compartilhamento” no canto inferior esquerdo da tela. Para evitar que ela se sobreponha ao rodapé, vamos pará-la cerca de 10px acima do rodapé.

Primeiro, precisamos determinar a proximidade da caixa com o rodapé cada vez que a página é rolada:

$(document).scroll(function() {
    checkOffset();
});

Se a caixa ficar muito próxima do rodapé (ou seja, dentro de 10px), mudaremos sua posição para absoluta:

function checkOffset() {
    if($('#social-float').offset().top   $('#social-float').height() 
                                           >= $('#footer').offset().top - 10)
        $('#social-float').css('position', 'absolute');
    if($(document).scrollTop()   window.innerHeight 
Observe que o pai do #social-float deve ser irmão do rodapé na estrutura HTML.