HELP : Page Produit - fiche_produit_right position fixed puis absolute lorsqu'on atteint un certain niveau de scroll

[Ben_Bbt]

Bonjour à tous,

Je cherche à modifier ma page produit afin d'obtenir le rendu visuel suivant :

Une succession d'information sur la colonne gauche (Image / Description / Module Produits Identiques....) en  position: relative pour qu'ils suivent normallement le scroll de la souris.

Sur la partie droite uniquement les informations récap (Nom du produit / Prix / Qté / Stock / Ajouter au panier) en position: fixed mais jusqu'a un certain niveau.

Dès qu'un certain niveau de scroll est atteint : cette partie de droite reprend une position : relative.
Ensuite on arrive sur du contenu en full width.

L'idée serait de reprendre ce qui est fait sur la fiche produit d'Etam.

Exemple : https://www.etam.com/pret-a-porter-manteaux-trenchs/manteau-a-capuche-fausse-fourrure-651217607.html

Je n'ai pas trouvé de module pour répondre à ce besoin, et étant débutant en JS & jQuery je n'ai pas trouvé de solution pour résoudre mon problème.

Auriez-vous une piste ou une idée ?

 

D'avance merci pour votre aide

 

 

 

 

 

Edited October 25, 2019 by Ben_Bbt (see edit history)

[ludovicus64]

Il faut que tu ajoutes un peu de javascript à ton theme :

Tu pourrais ajouter un event listener comme ci dessous au chargement de ta page :

window.onscroll = function() { maFonction() };

Puis tu définis ta fonction :

function maFonction(){    
	//Ici tu définis ta hauteur à laquelle tu changes le comportement
	var hauteurLimite = 900;
	if (window.pageYOffset >hauteurLimite ) {
		//Ici tu mets les changements de CSS (position relative ou fixed) si on scrolle en dessous de la limite
	}else{
		//Ici tu mets les changements de CSS si on scolle au dessus de la limite
	}
}

Voila, en espérant que cela t'aide

Edited October 26, 2019 by ludovicus64
Non terminé (see edit history)

[Ben_Bbt]

Bonjour Ludo !

Merci beaucoup pour ton retour !

La propriété position de ma div change bien en direct lorsque le niveau de scoll est atteint

En revanche le comportement est étrange :

--> Au lieu de rendre ma div à l'état initial la div s'efface tout simplement de ma page !

<script type="text/javascript">
 window.onscroll = function() { maFonction() };

function maFonction(){    
	//Ici tu définis ta hauteur à laquelle tu changes le comportement
	var hauteurLimite = 900;
	if (window.pageYOffset >hauteurLimite ) {
		document.getElementById("right_side_desc").style.position = "absolute";
	}else{
		document.getElementById("right_side_desc").style.position = "fixed";
	}
}
</script>

 

Tu as une idée du pourquoi du comment ?

Encore merci pour ton aide

 

 

 

 

[ludovicus64]

Re,

Je pense qu'il faut que tu regarde du coté des propriété CSS  de ton élément #right_side_desc.
N'oublie pas de regarder la propriété position du noeud HTML parent de #right_side_desc, il faut qu'il ait une valeur sinon le cadre de référence du positionnement de #right_side_desc sera le premier cadre avec la propriété position fixée à absolute ou relative par exemple.

En plus de passer la propriété position à fixed ou à absolute, spécifie aussi les propriétés top, left et z-index ca sera plus prudent. Comme ci après.

<script type="text/javascript">
 window.onscroll = function() { maFonction() };

function maFonction(){    
	//Ici tu définis ta hauteur à laquelle tu changes le comportement
	var hauteurLimite = 900;
	if (window.pageYOffset >hauteurLimite ) {
		document.getElementById("right_side_desc").style.position = "absolute";
      	document.getElementById("right_side_desc").style.top = "0px";
      	document.getElementById("right_side_desc").style.left = "0px";
      	document.getElementById("right_side_desc").style.zIndex = "1000";
	}else{
		document.getElementById("right_side_desc").style.position = "fixed";
      	document.getElementById("right_side_desc").style.top = "0px";
      	document.getElementById("right_side_desc").style.left = "0px";
      	document.getElementById("right_side_desc").style.zIndex = "1000";
	}
}
</script>

 

Bonne soirée.

Louis AUTHIE

 

[Ben_Bbt]

Bonjour Louis, 

Merci de nouveau pour ce conseil. 
L'élément parent est lui aussi doté d'une condition position : absolute

J'ai tenté d'intégrer tes différentes modifications, mais malheureusement celà ne change en rien la disparition pure et simple de ma div 😕

Je continue de creuser de mon côté, as-tu d'autres pistes ? 

D'avance merci