Comment empêcher les objets fixes de se chevaucher dans les pieds de page ?

Correction des objets fixes dans les pieds de page

Le problème courant des objets fixes défilant sur les pieds de page a une solution simple. Par exemple, considérons une case « Partager » fixe dans le coin inférieur gauche de l'écran. Pour éviter qu'il ne chevauche le pied de page, nous l'arrêterons environ 10 px au-dessus du pied de page.

Tout d'abord, nous devons déterminer la proximité de la boîte par rapport au pied de page à chaque fois que la page défile :

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

Si la case s'approche trop du pied de page (c'est-à-dire à moins de 10 px), nous changerons sa position en absolue :

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
}

Notez que le parent du #social-float doit être un frère du pied de page dans la structure HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!