Fixing Fixed Objects at Page Footers

The common issue of fixed objects scrolling over footers has a simple solution. For instance, let's consider a fixed "share" box in the bottom left corner of the screen. To prevent it from overlapping the footer, we'll stop it about 10px above the footer.

First, we need to determine the box's proximity to the footer each time the page is scrolled:

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

If the box gets too close to the footer (i.e., within 10px), we'll change its position to absolute:

function checkOffset() {
    if($('#social-float').offset().top   $('#social-float').height() 
                                           >= $('#footer').offset().top - 10)
        $('#social-float').css('position', 'absolute');
    if($(document).scrollTop()   window.innerHeight 
Note that the parent of the #social-float should be a sibling of the footer in the HTML structure.