J'ai un div.scroll_fixed avec le CSS suivant
.scroll_fixed {
position:absolute
top:210px
}
.scroll_fixed.fixed {
position:fixed;
top:0;
}
J'utilise le code jQuery suivant pour définir la classe .fixed lorsque le 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 la fixation de défilement vertical. Mais avec une petite fenêtre de navigateur, le défilement horizontal provoque un conflit avec le contenu à droite de cette div fixe.
Je voudrais que le div défile horizontalement avec le contenu.
Quelqu'un pourrait-il m'orienter dans la bonne direction? Je mouille toujours les pieds avec JS/JQuery.
Je veux essentiellement que cela fonctionne comme la deuxième case de cette exemple .
La démo conserve le position:fixed
De l'élément et manipule la propriété left
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/
Vous avez probablement déjà évolué, mais voici une réponse pour tous ceux qui recherchent une solution d'élément fixe à défilement horizontal. Ce plugin jquery a été créé pour résoudre ce problème exact.
Cette démo utilise un résumé du panier qui défilera toujours horizontalement lorsqu'il sera fixé en haut de la page; et, je l'ai également utilisé pour un en-tête au-dessus des données tabulaires:
Démo: http://jsfiddle.net/y3qV5/434/ (mis à jour)
Plugin et source: https://github.com/bigspotteddog/ScrollToFixed
Usage:
$(document).ready(function() {
$('#cart').scrollToFixed( { marginTop: 10 } );
});
utiliser 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.