[Résolu] Div qui suit le scroll et qui s'arrête

Bonjour à tous,

Dans le cadre d'un projet sur prestashop j'aimerai réaliser un panier qui suit le scroll de la page. J'ai trouvé le fragment de code qui pourrait m'aider mais j'aimerai y rajouter une condition.

En effet j'aimerai que ce comportement se limite à une partie du site. Quand on est dans la partie contenu le div suit le scroll et une fois qu'on arrive au footer il ne le suit plus (pour éviter que le panier ne vienne se mélanger avec le contenu du footer).

		var offset = $("#cart_block").offset();
		var topPadding = 20;
		$(window).scroll(function() {
		    if ($(window).scrollTop() > offset.top) {
			$("#cart_block").stop().animate({
			    marginTop: $(window).scrollTop() - offset.top + topPadding
			});
		    } else {
			$("#cart_block").stop().animate({
			    marginTop: 0
			});
		    };
		});

J'ai cherché mais je ne vois pas quelle logique appliquer. Je ne suis pas familier avec la synthaxe de jquery.

Je vous remercie d'avance !
Modifié par Gili (28 Jan 2012 - 17:40)

augmenter le margin-top ... c'est une mauvaise idée si tu veux mon avis.

Personnelement, j'ai préféré appliqué ou non un class CSS qui contient "position: fixed;", c'est quand même fait pour ...

Selon où le scroll se trouve $(window).scrollTop() si c'est plus bas que l'élément à bouger $("#id").offset().top, je met la "position:fixed;" si c'est plus bas que la position de l'élément du bas (footer) moins la hauteur de cette élément $("#id").offset().top-90, j'arrête le "position:fixed;".

Et si tu veux pas t'embeter, tu modifies directement

if ($(window).scrollTop() > offset.top) {

par

if ($(window).scrollTop() > offset.top && $(window).scrollTop() < $('#footer').scrollTop().top-100) { 

à tester / adapter (je fais ça de tête )

Salut kenor et merci de prendre de ton temps pour me répondre.

Cependant ça ne marche pas. Quand je transforme ma condition comme tu me l'as conseillé le div ne bouge plus du tout :

		var offset = $("#cart_block").offset();
		var topPadding = 20;
		$(window).scroll(function() {
		    if ($(window).scrollTop() > offset.top && $(window).scrollTop() < $('#footer').scrollTop().top-100) { 
			$("#cart_block").stop().animate({
			    marginTop: $(window).scrollTop() - offset.top + topPadding
			});
		    } else {
			$("#cart_block").stop().animate({
			    marginTop: 0
			});
		    };
		});

Un peu naïvement sur tes recommandation j'ai transformé le code ainsi mais bon je suppose que c'est une vision un peu trop simpliste de la chose (et ça ne fonctionne pas non plus bien entendu ^^) :

		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top && $(window).scrollTop() < $('#footer').scrollTop().top-100) { 
				$("#cart_block").css('position', 'fixed');
			});
			else $("#cart_block").css('position', 'static');
		}
		});

Modifié par Gili (28 Jan 2012 - 16:53)

Juste pour être sûr qu'on se base sur la même chose, ton footer a bien un id qui se nomme "footer" ? (<div id="footer></div>)

Edit : j'ai mis "$('#footer').scrollTop().top-100" c'est "$('#footer').offset().top-100"
Modifié par kenor (28 Jan 2012 - 16:58)

Oui il a bien un id #footer.

J'ai remplacé la ligne que tu m'indiques, maintenant il refonctionne comme avant. C'est à dire qu'il suit le scroll de la page mais n'a toujours pas de restriction au niveau du footer. On dirait qu'il ignore la condition. Je vais me pencher sur ce que tu m'as donné peut être que c'est moi qui ai omis quelque chose.

Haaaa Merci kenor t'es un boss !!

Tu m'as bien aiguillé, c'était effectivement un problème au niveau de la taille de mon footer et la valeur que je soustrayais.

Pour les futurs nécéssiteux le code correct (dans mon cas) est donc :

		var offset = $("#cart_block").offset();
		var topPadding = 20;
		$(window).scroll(function() {
		    if ($(window).scrollTop() > offset.top && $(window).scrollTop() < $('#footer').offset().top-150) { 
			$("#cart_block").stop().animate({
			    marginTop: $(window).scrollTop() - offset.top + topPadding
			});
		    } else {
			$("#cart_block").stop().animate({
			    marginTop: 0
			});
		    };
		});

Je te remercie du temps et que tu m'as accordé et de la solution apportée. Merci beaucoup !