Comment obtenir une div à position fixe pour faire défiler horizontalement le contenu? Utilisation de jQuery

Question

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 à l'aide de 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 que le 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 cet exemple.

Answer 1

La démo garde de l'élément position:fixed et la manipulation 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'utilisation de leftInit prend en compte une éventuelle marge gauche. Essayez-le ici: http://jsfiddle.net/F7Bme/

Answer 2

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 de tableau de données:

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

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

Utilisation:

$(document).ready(function() {
    $('#cart').scrollToFixed( { marginTop: 10 } );
});

Answer 3

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

Voici l'article expliqué et la démo 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.