Partage

position: sticky;

positionnement collant, fixe à un point clé

Sujet résolu
15 avril 2018 à 2:43:20

Bonjour,

En ce moment, je crée un site portfolio, pour exposer mes photographies. J'aimerai que mon texte explicatif suivent les images quand je scroll, vers le bas comme vers le haut, en ajoutant la propriété position: fixed au paragraphe le problème est résolu. Maintenant, j'aimerai que mon texte se fixe à environ 40px de marges du haut de la page quand le défilement ce fait vers le bas, et inversement avec le bas de la page quand le défilement des images ce fait vers le haut. Est-il possible en CSS de faire ça ?

Capture page 1

Ci-dessus, la description de la série se trouve à gauche, les images elles sont en colonne à droite.

capture page 2

Quand je défile vers le bas pour afficher les autres images la description reste fixe, du à la propriété cité avant.

Quelle propriété peut se combiner avec "position" pour que la description reste mobile sur la page jusqu'à atteindre X px de marge avec la bordure du haut avant de se fixer et inversement avec la bordure du bas ? 

#sujet
{ 
    display: flex;
    flex-direction: column;
    text-align: justify;
    width: 28%;
    margin-top: 10px;
    margin-left: 15px;
    position: fixed;
}

Ci-dessus le code CSS appliqué à la description.

Merci d'avance pour votre aide !

-
Edité par LéonardGobeli 15 avril 2018 à 20:17:33

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
15 avril 2018 à 10:29:24

Salut,

Je suis pas totalement sûr de ma réponse, mais tu peux regarder du coté des positions en sticky non?

Doc ici : https://developer.mozilla.org/fr/docs/Web/CSS/position

Donne moi ton avis sur ma Reconversion professionnel en Développeur Web ----- Rejoins moi sur LinkedIn
15 avril 2018 à 10:29:50

Salut,

le faire uniquement en CSS n'est pas possible.

Il faut utilise du JavaScript pour détecter le scroll dans la page, puis modifier le style de ton élément en fonction de la valeur du scroll.

Voilà un tuto qui explique le principe :
https://css-tricks.com/scroll-fix-content/

Edit après la réponse de Laurent :
Ouais, c'est vrai que y'a ça aussi. Mais attention, c'est assez mal supporté :
https://caniuse.com/#feat=css-sticky

-
Edité par Syltaen 15 avril 2018 à 10:31:26

15 avril 2018 à 14:27:10

Merci pour votre aide  !

J'ai essayé la propriété position: sticky;. Elle fonctionne, mais pas exactement comme je le souhaite (je n'ai pas assez peaufiné mon code ! :) )

Quand j'aurai appris le JS j'essaierai à nouveau ! Merci pour le tuto !

-
Edité par LéonardGobeli 15 avril 2018 à 14:27:39

15 avril 2018 à 16:12:13

De rien, mais comme la dit Syltaen méfie toi de la compatibilité, j'avais oublié que c'était experimental pour le moment. A++
Donne moi ton avis sur ma Reconversion professionnel en Développeur Web ----- Rejoins moi sur LinkedIn
15 avril 2018 à 20:52:52

J'ai eu du mal à comprendre comment fonctionnait cette propriété, jusqu'à ce que je trouve un tuto qui m'a franchement aidé. Pour celle et ceux qui sont intéressés : https://css-tricks.com/position-sticky-2/

position: sticky;

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown