css Position d'un bloc, fixed ou sticky ?

Salut à tous,

Je suis en train de peaufiner la barre de navigation sur mon site et comme je voudrais qu'elle soit fixe j'ai utilisé la propriété position: fixed;
Mais je m'aperçois qu'il existe également la propriété position: sticky;

Je l'ai essayé mais ça ne fonctionne pas, la barre de nav sort de l'écran lors du scroll.
Comment cette propriété fonctionne et quelle est la différence avec fixed ?
 
  Solution
Salut Victor,

Il y a une différence notable entre ces 2 propriétés :
  • fixed : l'élément auquel on applique la propriété fixed ne bougera pas de son emplacement d'origine quelque soit la position de la page web dans le viewport (fenêtre du navigateur).
  • sticky : doit être utilisé sur un élément d'un bloc parent et il sera fixe dans ce bloc. Mais si le bloc parent sort du viewport alors l'élément sort avec lui.
Il y a un Codepen qui illustre très bien ça:



Donc probablement si sticky ne fonctionne pas sur ton élément c'est qu'il n'est pas intégré à un élément parent, et donc il sort du viewport lors du scroll de la page.

Wazz9

Membre
Salut Victor,

Il y a une différence notable entre ces 2 propriétés :
  • fixed : l'élément auquel on applique la propriété fixed ne bougera pas de son emplacement d'origine quelque soit la position de la page web dans le viewport (fenêtre du navigateur).
  • sticky : doit être utilisé sur un élément d'un bloc parent et il sera fixe dans ce bloc. Mais si le bloc parent sort du viewport alors l'élément sort avec lui.
Il y a un Codepen qui illustre très bien ça:



Donc probablement si sticky ne fonctionne pas sur ton élément c'est qu'il n'est pas intégré à un élément parent, et donc il sort du viewport lors du scroll de la page.
 

Nicolas

Membre actif
Juste pour préciser qu'il est important de rajouter l'attribut top: pour que cela fonctionne... top: 0; pour coller l'élément en haut de son container parent par exemple. Sans cela cela ne fonctionnera pas !
CSS
.sticky {
  position: sticky;
  top: 0;
}
 

Ces discussions pourraient vous intéresser...

Bonjour à tout le monde, Je suis tombé sur un site et j'ai trouvé la barre de menu en haut de page géniale !! J'aimerais refaire la même sur mon site mais même en regardant les outils de développement je ne comprends pas bien comment il a fait. Pourriez-vous, encore une fois, m'aider ?? Voici...
  • Résolue
Salut, je suis inscris depuis quelques jours mais c'est mon premier message, Je voudrais faire une page d'accueil comme Pinterest Pinterest avec des blocs qui ne sont pas alignés horizontalement. Mais c'est un enfer à faire ! Si un bloc est plus grand que celui sur sa droite par exemple alors...
Salut, je me baladais sur le site de Mozilla Internet for people, not profit — Mozilla avec l'inspecteur web activé et j'ai remarqué une propriété CSS sur leur conteneur principal que je ne connaissais pas : zoom .mzp-l-content { zoom: 1; margin: 0 auto; max-width: 1440px...
Haut