interrompre la fonction sticky en bas de post

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu interrompre la fonction sticky en bas de post

Message par Sa Majesté T.M. Jeu 25 Juin 2020 - 3:21

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.


Dernière édition par Sa Majesté T.M. le Jeu 25 Juin 2020 - 14:07, édité 1 fois
Sa Majesté T.M.

Sa Majesté T.M.
Nouveau membre

Masculin
Messages : 6
Inscrit(e) le : 10/06/2020

https://terra-mater.forumactif.com/
Sa Majesté T.M. a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: interrompre la fonction sticky en bas de post

Message par mSyx Jeu 25 Juin 2020 - 13:08

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
mSyx

mSyx
****

Masculin
Messages : 394
Inscrit(e) le : 22/09/2012

https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: interrompre la fonction sticky en bas de post

Message par Sa Majesté T.M. Jeu 25 Juin 2020 - 14:07

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.
Sa Majesté T.M.

Sa Majesté T.M.
Nouveau membre

Masculin
Messages : 6
Inscrit(e) le : 10/06/2020

https://terra-mater.forumactif.com/
Sa Majesté T.M. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: interrompre la fonction sticky en bas de post

Message par mSyx Jeu 25 Juin 2020 - 14:17

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 :/
mSyx

mSyx
****

Masculin
Messages : 394
Inscrit(e) le : 22/09/2012

https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum