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

Défilement horizontal d'un div à position fixe à l'aide de jQuery

Dans cet article, nous aborderons la question du défilement horizontal du contenu dans un champ fixe positionnez le div à l'aide de jQuery.

Un utilisateur a un div avec une classe scroll_fixed et souhaite le corriger lorsqu'il atteint le haut de la page. Le CSS suivant stylise le div :

.scroll_fixed {
    position:absolute
    top:210px
}
.scroll_fixed.fixed {
    position:fixed;
    top:0;
}

Le code jQuery est utilisé pour ajouter une classe fixe lorsque le div atteint le sommet :

$(window).scroll(function (event) {
    // Check if the scroll position is greater than the top offset of the div
    if ($(this).scrollTop() >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }
});

Cela fonctionne bien pour le défilement vertical, mais provoque un conflit avec le contenu à droite du div lorsque la fenêtre du navigateur est petite. L'utilisateur souhaite que le div défile horizontalement avec le contenu.

/Solution :

Pour faire défiler le div horizontalement, nous devons conserver sa position : fixe et manipuler la propriété de gauche au lieu du haut. Le code jQuery mis à jour suivant accomplit cela :

var leftInit = $(".scroll_fixed").offset().left;

$(window).scroll(function (event) {
    // Get the current scroll positions
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // Fix the div when it reaches the top
    if (y >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }

    // Adjust the left offset of the div based on the scroll position
    $(".scroll_fixed").offset({
        left: x + leftInit
    });
});

En utilisant leftInit, nous prenons en compte toute marge gauche sur le div. Essayez cette solution sur : http://jsfiddle.net/F7Bme/

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!