How to Prevent Fixed Objects from Overlapping Footers?

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 < $('#footer').offset().top)
        $('#social-float').css('position', 'fixed'); // restore when you scroll up
}

Note that the parent of the #social-float should be a sibling of the footer in the HTML structure.

The above is the detailed content of How to Prevent Fixed Objects from Overlapping Footers?. For more information, please follow other related articles on the PHP Chinese website!