interrompre la fonction sticky en bas de post

[Sa Majesté T.M.]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 24.06.20
Lien du forum : https://terra-mater.forumactif.com/

Description du problème

Bonjour à tou.te.s.

Merci d'être là.

Je voudrais que l'avatar d'un post reste sur place sur la gauche pendant qu'on scrolle le post qu'on est en train de lire, histoire que son auteur reste avec nous, au lieu qu'il remonte avec son post à mesure qu'on le scrolle.

J'ai découvert la fonction sticky qui pouvait faire ça, et j'ai donc utilisé ce code dans mon CSS:

Code:

.sticky {
  position:-webkit-sticky;
  position: sticky;
  top: 8px;
  bottom: 20px;
  border: 0px solid #b83321;*/
}

Avec une div class="sticky">[autour de la <div class="postprofile"> dans ma template]</div

Ce qui donne en partie ce que je voulais, l'avatar butte sur le haut de l'écran et tout le reste défile vers le haut quand on scrolle... je crie hourra ! mais voilà... l'avatar ne s'arrête pas de naviguer en bas de son propre post, comme j'aimerais qu'il le fasse.. il continue et recouvre l'avatar du post suivant, ou les boutons répondre. comme ceci:

exemple:

j'ai beaucoup cherché sur le web dans les tutos et autres cours qui m'ont appris cette fonction sympa, mais je n'ai pas trouvé comment interrompre la fonction sticky en bas de post/page. Peut-être que ce n'st pas cette commande qui permet d'obtenir ce que je veux ? Merci de m'éclairer.

[mSyx]

Hello o/
Dans le template viewtopic_body, il faut retirer la div .sticky qui entoure le .postprofile; et changer le CSS de ce dernier par le suivant:

Code:

.postprofile {
  background-color: rgba(255,255,255,0.5);
  border: 3px solid #DDA761;
  border-radius: 14px;
  border-right-style: solid;
  border-right-width: 3px;
  color: #8b3321;
  display: inline;
  float: left;
  margin-left: 0;
  margin-top: 10px;
  min-height: 80px;
  padding: 0 6px 6px 0;
  position: sticky;
  width: 194px;
  word-wrap: break-word;
  top: 8px;
  margin-bottom: 30px;
}

En mettant le position: sticky directement sur le .postprofile avec le top: 8px; et un margin-bottom (pour éviter que l'avatar ne rentre dans les boutons J'aime/Je n'aime pas), l'avatar ne vient plus dépasser du post :b

[Sa Majesté T.M.]

Ouaouh ! ça marche parfaitement.

Merci beaucoup mSyx ! C'est magnifique.

J'avais essayé en premier de mettre la position sticky sur .postprofile, comme ici, en toute logique, mais j'avais dû faire une erreur ailleurs pour que ça ne fonctionne pas.

En tout cas c'est parfait, super ! super ! Et si simple ! je regrette de ne pas avoir trouvé tout seul.

[mSyx]

Au plaisir !
Le position: sticky ne peut pas être mis tout seul, il y a une condition (wc3schools) à respecter; mais c'est pas encore évident de l'utiliser à tout va, je te l'accorde :/