11521 sujets

JavaScript, DOM et API Web HTML5

Colonne sticky on scroll

Bonjour,

Je viens de passer les dernières 24h à essayer un truc et rien à faire... je n'y arrive pas alors je me suis rappelé à vous Smiley smile

J'explique !


<header style="height:150px;"></header>
<div class="wrapper">
<aside class="left">
<div class="tostick" style="height:200px">block 1</div>
<div style="height:400px;">block 2</div>
<div class="tostick" style="height:200px">block 3</div>
</aside>
<content style="height:1500px;" class="right">
....
</content>
</div>


Ce que je cherche à faire c'est quand quand je scroll la page ( le body ) , dès qu'un element .tostick touche le dessus (le bord de la fenêtre), toute la colonne aside se freeze "pendant 200pixels" et ensuite reprenne sa route comme si de rien n'était jusqu'au prochain tostick qui va encore se refreezer tant qu'on a pas rescroll 200 de plus ou de moins.

Je vous passe les 1000 essais infructueux à base de passer de fixed à absolute en modifiant le top.

A l'aide, merci beaucoup !!!
Modifié par winniezz (17 Dec 2021 - 14:04)
Je pense que ton block1 va resté collé le temps de défiler le block2, puis le block3 va le pousser.
D'après moi si tu veux que le block1 reste collé pendant 200px, ton block2 doit faire 200px de haut.
On part avec la colonne en absolu dans un englobant

L’idée c’est quand ça touche on passe la colonne en position fixed en lui appliquant les coordonnés actuelles et ensuite,.. plus tard on repasse pas absolu avec un top négatif (pour compenser le retard pris pendant la position fixed) (et un padding bottom pour garder la meme hauteur complete totale (l’englobant coupant pour ne pas afficher la colonne qui s’en va hors de la fenêtre) et ensuite on repasse en fixed … et de nouveau en absolu…

(les éléments en absolu suivant le scroll de la fenêtre et en fixed, non)

C’est tout la colonne qui doit prendre du retard, par crans.

Mais impossible que ça se passe bien Smiley decu

Je ne m’en sors pas.
Modifié par winniezz (17 Dec 2021 - 17:21)
Salut,

je pense qu'il nous faudrait aussi ton css pour pouvoir tester. (et ton javascript vu la section)

De mémoire il y a des comportements bizarres quand on utilise la propriété css sticky avec 2 élément dans le même groupe mais il faudrait relire la doc pour les détails Smiley sweatdrop

Edit : Petit jsfiddle pour confirmer le comportement bizarre avec le double sticky dans le même élément (1 et 3 puis 4 et 6) , et qui fonctionne bien quand c'est 2 éléments distinct (1 et 4 )

Et la doc qu'il faudrait lire ici : https://developer.mozilla.org/fr/docs/Web/CSS/position#positionnement_adh%C3%A9rent_sticky
Modifié par Mathieuu (17 Dec 2021 - 17:38)
Sujet clos
Aller à