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

Correction d'un div à défilement horizontal avec du contenu à l'aide de jQuery

Question :

Comment puis-je définir la position d'un div fixe pour qu'il défile horizontalement avec le contenu ?

Description détaillée :

Un élément div avec la classe CSS "scroll_fixed" est initialement défini à une position absolue. Cependant, lorsque le div atteint le haut de la page, le code jQuery ajoute la classe "fixed" pour fixer sa position. Cette configuration fonctionne bien pour le défilement vertical, mais le défilement horizontal provoque des problèmes avec le contenu vers la droite.

Objectif :

Faire défiler le div horizontalement avec le contenu, similaire à la deuxième case dans un exemple fourni.

Réponse :

Pour réaliser un défilement horizontal pour le div, la solution maintient la position de l'élément fixe mais manipule sa propriété left :

<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();

    // Check if the element should be fixed based on vertical scroll
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }

    // Adjust the element's left position based on horizontal scroll
    $(".scroll_fixed").offset({
        left: x + leftInit
    });

});</code>

Cela garantit que le div défile horizontalement avec le contenu de la page tout en conservant sa position fixe verticalement.

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!