Comment puis-je obtenir une position fixe div pour faire défiler horizontalement avec le contenu? À l'aide de jQuery

J'ai un div.scroll_fixed avec le code CSS suivant

.scroll_fixed {
    position:absolute
    top:210px

}
.scroll_fixed.fixed {
    position:fixed;
    top:0;
}

Je suis en utilisant la suite de jQuery code de la .fixes de classe lorsque la div atteint le haut de la page.

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

$(window).scroll(function (event) {
    //what the y position of the scroll is
    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');
    }
});

Cela fonctionne très bien pour le défilement vertical de fixation. Mais avec une petite fenêtre de navigateur, le défilement horizontal provoque un clash avec le contenu à droite de cette fixe div.

Je voudrais la div pour faire défiler le contenu horizontalement.

Quelqu'un pourrait-il me diriger dans la bonne direction. Toujours obtenir mes pieds mouillés avec JS/JQuery.

En gros, je veux qu'il fonctionne comme la deuxième case dans cette exemple.

InformationsquelleAutor jfeust | 2011-01-13
  1. 23

    La démo est en gardant l'élément position:fixed et de la manipulation de la left propriété 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
    });

});

    À l'aide de leftInit prend une possible marge de gauche en compte. Essayer ici: http://jsfiddle.net/F7Bme/

    • Merci, c'est essentiellement la fonctionnalité que je veux. Malheureusement, j'ai mon div imbriqué dans une largeur fixe centré conteneur. Une fois l' .fixe la classe des coups de pied dans la mise en page devient tout foiré. Le fixe div ne suit plus le mouvement de la mise en page centrée sur le redimensionnement de la fenêtre. Pas sûr que je peux pas y échapper. Voir ma réponse http://jsfiddle.net/35nyK/2/. Lors de votre première charge et essayer de le redimensionnement de la zone rouge se déplace correctement. Une fois que vous de faire défiler et d'essayer de redimensionnement, la mise en page est tout foiré. Est-il de toute façon de gérer le positionnement par rapport à celle centrée conteneur?
    • Intéressant, je vais jouer avec elle et voir ce que je peux venir avec.
    • Incroyable, Merci beaucoup
    InformationsquelleAutor Andrew Whitaker
  2. 21

    Vous avez probablement déplacé par maintenant, mais voici une réponse de quelqu'un d'autre à la recherche pour un défilement horizontal fixe élément de solution. Ce plugin jquery a été créé pour résoudre ce problème exact.

    Cette démo utilise un panier résumé qui va encore faire défiler horizontalement lors du fixe vers le haut de la page; et, je l'ai aussi utilisée pour un en-tête au-dessus des données tabulaires:

    Démo: http://jsfiddle.net/y3qV5/434/ (mise à jour)

    Plugin et source: https://github.com/bigspotteddog/ScrollToFixed

    Utilisation:

    $(document).ready(function() {
    $('#cart').scrollToFixed( { marginTop: 10 } );
});
    • Jsfiddle ci-dessus fonctionne parfaitement sur Chrome 29.0.1547.66, de sorte que le problème dans le Chrome a été fixé, je suppose
    InformationsquelleAutor bigspotteddog
  3. 8

    utiliser la propriété css position:sticky pour l'obtenir.

    Voici l'article explique et démonstration en direct.

    http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

    le seul inconvénient est la compatibilité du navigateur.

    • À compter d'aujourd'hui, le collant démo ne fonctionne pas, même dans les dernières versions de Google Chrome, de sorte qu'il ne semble pas utile de répondre plus. Bon lien, mais je vais voter -1
    • position: sticky; est une solution propre. Il y a des bonnes polyfills que de la faire fonctionner en Chrome aussi.
    • 2018: position: sticky fonctionne très bien et est bien pris en charge, sauf si vous voulez l'utiliser pour <thead> ou <tr>
    InformationsquelleAutor Konga Raju