Jump to content
Ben_Bbt

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

Recommended Posts

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 by Ben_Bbt (see edit history)

Share this post


Link to post
Share on other sites

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 by ludovicus64
Non terminé (see edit history)

Share this post


Link to post
Share on other sites

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 :)

 

 

 

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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


 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More