[Résolu] Position: sticky sur le contenu d'une colonne flex-box

Bonjour à toutes et à tous,

Je viens vers vous parce que je sèche. Je suis pas hyper calé en CSS, j'ai deux trois bases et une bonne logique, donc je m'en sors la plupart du temps. Là non. J'ai cherché un peu dans les ressources sur le web qui parle des flex-box et des éléments en fixe, mais je trouve pas.

Mon objectif :


Voici une page sur mon futur site Wordpress. Il s'agit d'un produit parent woocommerce dans lequel j'intègre tous ses produits enfants. Comme vous le voyez sur la photo, la grille de la page est sur deux colonnes. Mon objectif est que lorsque l'on scrolle dans la page, il n'y ait que la colonne de droite qui bouge, donc je cherche à ce que l'image du produit, le grand carré dans la colonne de droite, reste en fixe.


Dans cette image on voit bien les deux colonnes (cadre rouge en bas à droite) .col-xl-6, mais dans les exemples que j'ai trouvé sur le net, on fait clairement la distinction en .gauche et .droite. Là mes deux colonnes portent le même nom et je suis bien incapable de les distinguer l'une de l'autre. Je ne sais pas comment appeler la colonne de gauche ni comment lui adjoindre l'ordre de rester en place...

Est ce que je cherche à faire quelque chose d'impossible ? J'ai essayé d'adjoindre le fameux {position: sticky;} mais de 1 "sticky" ne semble pas être reconnue dans mon champ de CSS additionnel de l'onglet de personnalisation de Wordpress (il ne se met pas en bleu quand "relative", lui, se met bien en bleu) et de 2, j'arrive pas à obtenir le moindre effet sur les éléments que je cherche à atteindre...

Bon, je suis un peu perdu. Auriez-vous un avis, un conseil, une direction par où chercher ? Merci beaucoup.

Bonjour Sigurdur,

Il est possible d'avoir une url pour voir (ou le code de la page)
car sans le code source difficile de pourvoir cibler la 1 colonne...
Modifié par aliasdmc (10 Apr 2020 - 09:22)

Hello,

C'est bien position: sticky que tu cherches à faire. Apriori je dirai qu'il t'en faut (sans avoir une vue sur ton code).
Le premier sera sur ton header:

header{
  position: sticky;
  top: 0;
}

Il ne faut pas oublié le top 0 qui donne la position de "blocage".

Ensuite sur ton bloc de gauche, tu auras :

header{
  position: sticky;
  top: 50px;
}

Le 50px dans ce cas-ci est au pif mais doit être calculé (probablement en JS si ton header n'a pas de height) pour être certain que son point de blocage soit égal à son offset.top initial.

J'espère que ça pourra t'aider

Bonjour. ".col-xl-6" est une classe permettant une définition de la taille de la colonne, ce n'est pas une classe servant à nommer la colonne. Dans votre cas il vaux mieux partir d"un élément parent avec une classe explicite et cibler l'élément enfant concerné avec un :nth-child :

.elementParent > :nth-child(2) {}// pour cibler le deuxième élément enfant par exemple

Un exemple sticky : codePen

Hello,
Merci pour vos réponses, déjà. Je vous mets le morceau du code source de la page qui me semble correspondre. Il y a une redirection sur le sous-domaine de la boutique tant que c'est en développement, du coup partager l'url ne servirait à rien...

 <div class="menu-holder item-delay_off">
                    <nav class="menu-services-container"><ul id="menu-services" class="menu"><li id="menu-item-335" class="hover-soon menu-item menu-item-type-custom menu-item-object-custom menu-item-335"><span><a title="SOON" href="#">• création graphique</a></span></li>
<li id="menu-item-336" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-336"><span><a title="SOON" href="#">• web</a></span></li>
<li id="menu-item-337" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-337"><span><a title="SOON" href="#">• photographie</a></span>
<ul class="sub-menu">
	<li id="menu-item-2975" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2975"><span><a title="SOON" href="#">shooting</a></span></li>
	<li id="menu-item-2974" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2974"><span><a title="SOON" href="#">packs photos pros</a></span></li>
</ul>
</li>
<li id="menu-item-2858" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2858"><span><a title="SOON" href="#">• vidéo</a></span>
<ul class="sub-menu">
	<li id="menu-item-2969" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2969"><span><a title="SOON" href="#">teaser</a></span></li>
</ul>
</li>
<li id="menu-item-2859" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2859"><span><a title="SOON" href="#">• écriture &#038; traduction</a></span></li>
</ul></nav>                </div>
            </div>
                    </div>
    </div>
</div>        </header>
    </div><div class="woocommerce-notices-wrapper"></div><div id="product-549" class="post-549 product type-product status-publish has-post-thumbnail product_cat-services first instock taxable shipping-taxable product-type-simple">
	<div class="container">
		<div class="product-holder padding-bottom_md row">
			<div class="col-xl-6">
				<div class="product-gallery">
	<div class="gallery-type_default">
		<div class="owl-carousel wow fadeInUpNeuron" data-slider-id="1">
                                                <div class="lightbox">
                        <a href="https://shop.fabrikka.fr/wp-content/uploads/2019/05/vignette-le-web.jpg">
                            <img src="https://shop.fabrikka.fr/wp-content/uploads/2019/05/vignette-le-web.jpg" alt="" title="vignette-le-web">                        </a>
                    </div>
                        </div>
        	</div>
</div>			</div>
			<div class="col-xl-6">
				<div class="single-product_info">
					<div class="d-flex align-items-center breadcrumb-rating">
						<nav class="woocommerce-breadcrumb"><a href="https://shop.fabrikka.fr">Accueil</a><span>/</span><a href="https://shop.fabrikka.fr/categorie-produit/services/">Services</a><span>/</span>Le web</nav>					</div>
					<h2 class="product_title entry-title">Le web</h2><h4 class="price d-flex align-items-center">création / maintenance / hébergement</h4>
<div class="product_meta">

	
	
		<span class="sku_wrapper">UGS : <span class="sku">sites-web</span></span>

	
	<span class="posted_in">Catégorie : <a href="https://shop.fabrikka.fr/categorie-produit/services/" rel="tag">Services</a></span>
	
</div>

Si vous pouviez m'aider à cibler l'élément a sticker, ce serait cool.

Danke schön.

Hello,

Après quelques essais, j'ai trouvé que l'appel devait être faite sur .product-gallery pour la colonne de gauche et .single-product_info pour la colonne de droite. Il se trouve aussi que position: sticky ne suffisait pas. J'ai enfin réussi avec ce code :

.product-gallery { 
		position: -webkit-sticky;
		position: sticky;
		top: 130px;
}

Et là c'est gagné !

Merci pour vos lumières.
Modifié par Sigurdur (10 Apr 2020 - 14:11)

Merci Jean-Pierre,
C'est exactement là que j'avais trouvé que mon code était incomplet.