How to Prevent Fixed Objects from Overlapping the Footer Using jQuery?

Avoiding Overlapping Fixed Objects with the Footer

Many web developers encounter the issue of fixed objects scrolling over the footer. This is particularly common with elements such as share boxes, navigation menus, or social media widgets. To prevent this overlap, a simple solution can be implemented using jQuery.

Consider the following HTML structure:

<div>

And the CSS:

#social-float {
    position: fixed;
    bottom: 10px;
    left: 10px;
    /* Other styles... */
}

To ensure that the share box stays fixed unless it reaches the footer, use jQuery to monitor its position on scroll:

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

function checkOffset() {
    if ($('#social-float').offset().top + $('#social-float').height() 
                                          >= $('#footer').offset().top - 10) {
        $('#social-float').css('position', 'absolute');
    } else if ($(document).scrollTop() + window.innerHeight < $('#footer').offset().top) {
        $('#social-float').css('position', 'fixed');
    }
}

This solution calculates the distance between the share box and the footer, and if it's within 10px, it changes the box's position to absolute. When scrolling up, it restores the fixed position.

Remember to have the parent element of #social-float as a sibling of the footer for this solution to work effectively. Good luck implementing this fix on your website!

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