Comment corriger la position horizontale d'un Div fixe pendant le défilement ?

Défilement horizontal d'un div à position fixe

Dans cette requête, un utilisateur recherche une solution pour éviter les conflits de contenu lorsqu'un div fixe défile horizontalement aux côtés d’autres contenus. L'implémentation initiale utilisant jQuery corrige avec succès le div verticalement, mais ne prend pas en charge le défilement horizontal.

La solution proposée implique de modifier le code jQuery pour manipuler la propriété gauche de l'élément :

var leftInit = $(".scroll_fixed").offset().left;
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));


$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }

    $(".scroll_fixed").offset({
        left: x + leftInit
    });

});

Explication

1. leftInit stocke le décalage gauche initial du div.
2. Lors du défilement, la valeur x est définie comme le négatif du décalage de défilement actuel, ce qui déplace efficacement le div avec le défilement horizontal.
3. leftInit garantit que toute marge gauche sur le div est correctement prise en compte.

Cette approche maintient la position fixe du div tout en lui permettant pour faire défiler horizontalement le contenu, évitant ainsi les conflits et améliorant l'expérience utilisateur.

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!