Discussion :

[Elliot2.0]

Bonjour,

J'aimerai créé un élément sticky dans mon site comme cela :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class='sticky'>Texte...</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.sticky{
	position : sticky;
	top : /* 10px avant l'élément */
}

Mais je ne sais pas comment faire pour mettre top 10 pixel ai dessus de l'élément et donc commencer l'effet de sticky quand l'élément scroll de 10px vers le haut (je suis désolé si je n'utilise pas les bons mots pour dire cela mais j'espère que vous comprendrez).

Merci d'avance !

[NoSmoking]

Bonjour,

Mais je ne sais pas comment faire pour mettre top 10 pixel ai dessus de l'élément

pas sûr d'avoir tout bien compris mais tu peux mettre une position négative.

[Elliot2.0]

Bonjour,

Merci de la réponse.
Je suis comprend que vous n'avez pas trop compris ce que je voulais dire (même moi je n'ai pas trop compris ce que je voulais dire &#128517.
Voici ce que je voulais dire : J'aimerai pouvoir mettre la valeur css "top" de façon que un élément en "position:sticky;", qui se place de base dans le flux normal de la page, reste fixe lorsqu'il arrive 10px au dessus de sa position initiale.

Exemple :

Code pageweb :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
Bla
Bla
Bla
Bla <- 10px au dessus de l'élément, à partir d'où il doit rester fixe
×    <- élément
Bla
Bla
...

J'espère que vous comprendrez. Sinon, n'hésitez pas à me demander ce que vous n'avez pas compris.

[NoSmoking]

Toujours pas trop compris mais ...
Si les exemples donnés par la documentation ne te permettent pas d'obtenir ton rendu voulu en CSS peut-être que le JavaScript peut t'y aider.

[mathieu]

lorsqu'il arrive 10px au dessus de sa position initiale.

lorsqu'il arrive comment ? en faisant défiler la page vers le bas ?
c'est à dire que si on affiche le haut de la page, l'élément reste dans le flux normal et quand on affiche le bas, l'élément en question doit se bloquer 10 pixels au dessus du haut de la page ?

pour tester la proposition de NoSmoking avec un top négatif, vous pouvez tester là en modifiant le code css :
https://developer.mozilla.org/fr/doc...ple_interactif