Comment faire défiler horizontalement un Div fixe avec le contenu d'une page à l'aide de jQuery ?

Défilement horizontal de Divs fixes avec jQuery

Dans ce problème, nous avons un élément div avec une position verticale fixe en utilisant jQuery et CSS. Cependant, le défilement horizontal provoque des conflits avec le contenu à droite du div. Notre objectif est d'activer le défilement horizontal du div ainsi que du contenu de la page.

La solution consiste à maintenir la position fixe de l'élément, mais également à manipuler sa propriété left à l'aide de jQuery :

<code class="javascript">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();

    // Vertical positioning logic
    if (y >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }

    // Horizontal positioning
    $(".scroll_fixed").offset({
        left: x + leftInit
    });
});</code>

En utilisant leftInit, nous prenons en compte toute marge gauche possible sur l'élément fixe. Cette approche permet au div fixe de défiler horizontalement avec le contenu, similaire au deuxième exemple de la ressource fournie.

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!