Bonjour à toutes et à tous,
Aujourd'hui, je vous propose une étude sur la position sticky car je viens d'en faire l'expérience et même si j'imaginais très bien le concept, la mise en application m'a été fort chaotique.
1- La théorie
1-1 Définitions
La position sticky est le fait de pouvoir maintenir la position d'un objet à un endroit précis dès que celui-ci devient hors de portée. Entendez par là une réaction au scroll.
Ce qui sous-entends que cet objet a une position initiale et une position 'en mode sticky'.
Ma démonstration s'appuie sur les éléments suivants :
* définissons notre objet comme étant dénommé ci-après 'objet'
* définissons la position initiale de notre objet comme étant la position définie par nous-même tel que nous voulons que l'objet soit placé à l'affichage de la page.
* De fait, la position finale sera celle que l'objet maintiendra à partir du moment où il est censé passer hors du champs de vision.
1-2 Exemple de base
A ce stade nous observons :
- l'apparition d'une barre de scroll verticale causée par la taille de body
- notre objet est placé aux coordonnées (0, 0)
- notre objet occupe toute la largeur de la zone d'affichage mais sa hauteur est limitée à 100 pixels.
Conséquence :
Au fur et à mesure que l'utilisateur descendra, notre objet remontera jusqu'à disparaître complètement.
Jusqu'ici, rien de magique, R.A.S mon capitaine !
2- La pratique
En gardant l'exemple précédent comme support, ajoutons maintenant la valeur sticky à la propriété position de notre objet.
Nous l'avons vu dans les définitions, nous devrons donc positionner notre objet dans l'espace en fonction de valeur, la 'position après'. Pour ce faire, il convient d'utiliser les propriétés liées à la position dans l'espace soit top, bottom, right ou left.
Par rapport à notre exemple nous allons ajouter ceci :
Lorsque l'utilisateur usera du scroll vertical, notre objet restera à la position 0 de l'axe vertical ; ce qui donnera l'impression que notre objet est collé en haut de la zone d'affichage.
"Magnifique" me direz-vous, "je le mets en développement de suite".
Attendez, il y a des choses à prendre en considération.
3- Pré-requis, astuces et compagnie
J'en étais à la fin du paragraphe précédent quand je m'aperçus que le théorique appliqué à ma maquette ne fonctionnait pas.
J'ai alors fouillé le net à la recherche de la moindre information qui me permettrait d'avancer mais personne n'en parle. Soit car c'est trop secret pour être divulgué soit car le support de cette propriété est très limité (Firefox depuis quelques versions, Chrome s'y met seulement avec préfixe, Safari expérimente et Microsoft étudie la question de savoir s'il va l'étudier).
Avant de tenter l'expérience, il vous faudra en sus prendre en considération ces éléments dans votre workflow :
a) la position de l'objet n'est pas référente à la zone d'affichage mais à son premier parent :
Ce qui signifie qu'un élément li placé ainsi se réfèrera à son parent ul/ol et non pas ni à html ni à body. Donc si votre ul n'a pas une taille suffisante, votre li va disparaître au scroll.
b) l'overflow du premier parent de l'[i]objet ne doit en aucun cas être stipulé ![/b]
Sinon la valeur sticky est littéralement ignorée.
c) avec un tel concept il faut bien garder en tête et les dimensions du média par lequel l'utilisateur accède ainsi que celle de l'objet. Hé oui, si votre objet est plus grand que la hauteur de la zone d'affichage vous perdrez 1000 points en accessibilité (valeur totalement subjective).
(d) votre objet et ses conteneurs devront faire partie du flux.)
PS: je dois vérifier ce point car je ne l'ai pas testé mais il me semble l'avoir lu.
3- Documentation
MDN - La propriété position en Css
Can I Use position:sticky in Css ? (en anglais)
Démonstration d'un usage de la position sticky en Css
Article de Css-Tricks sur le position sticky (en anglais)
Stickyfill le polyfill (en JS)
Fixed-sticky le polyfill (en JS)
Vous avez essuyé quelques plâtres et avez trouvé une solution malgré tout ? Partagez ci-dessous vos astuces et conseils à ce sujet. 
Modifié par Greg_Lumiere (02 Dec 2016 - 15:13)
Aujourd'hui, je vous propose une étude sur la position sticky car je viens d'en faire l'expérience et même si j'imaginais très bien le concept, la mise en application m'a été fort chaotique.
1- La théorie
1-1 Définitions
La position sticky est le fait de pouvoir maintenir la position d'un objet à un endroit précis dès que celui-ci devient hors de portée. Entendez par là une réaction au scroll.
Ce qui sous-entends que cet objet a une position initiale et une position 'en mode sticky'.
Ma démonstration s'appuie sur les éléments suivants :
* définissons notre objet comme étant dénommé ci-après 'objet'
* définissons la position initiale de notre objet comme étant la position définie par nous-même tel que nous voulons que l'objet soit placé à l'affichage de la page.
* De fait, la position finale sera celle que l'objet maintiendra à partir du moment où il est censé passer hors du champs de vision.
1-2 Exemple de base
<html>
<head>
<style>
body {
height: 300vh;/* soit 3 fois la hauteur de la zone d'affichage */
}
.objet {
height: 100px;
background: silver;
}
</style>
</head>
<body>
<div class="objet">Mon Objet</div>
</body>
</html>A ce stade nous observons :
- l'apparition d'une barre de scroll verticale causée par la taille de body
- notre objet est placé aux coordonnées (0, 0)
- notre objet occupe toute la largeur de la zone d'affichage mais sa hauteur est limitée à 100 pixels.
Conséquence :
Au fur et à mesure que l'utilisateur descendra, notre objet remontera jusqu'à disparaître complètement.
Jusqu'ici, rien de magique, R.A.S mon capitaine !
2- La pratique
En gardant l'exemple précédent comme support, ajoutons maintenant la valeur sticky à la propriété position de notre objet.
Nous l'avons vu dans les définitions, nous devrons donc positionner notre objet dans l'espace en fonction de valeur, la 'position après'. Pour ce faire, il convient d'utiliser les propriétés liées à la position dans l'espace soit top, bottom, right ou left.
Par rapport à notre exemple nous allons ajouter ceci :
.objet {
position: sticky;
top: 0;
}Lorsque l'utilisateur usera du scroll vertical, notre objet restera à la position 0 de l'axe vertical ; ce qui donnera l'impression que notre objet est collé en haut de la zone d'affichage.
"Magnifique" me direz-vous, "je le mets en développement de suite".
Attendez, il y a des choses à prendre en considération.
3- Pré-requis, astuces et compagnie
J'en étais à la fin du paragraphe précédent quand je m'aperçus que le théorique appliqué à ma maquette ne fonctionnait pas.
J'ai alors fouillé le net à la recherche de la moindre information qui me permettrait d'avancer mais personne n'en parle. Soit car c'est trop secret pour être divulgué soit car le support de cette propriété est très limité (Firefox depuis quelques versions, Chrome s'y met seulement avec préfixe, Safari expérimente et Microsoft étudie la question de savoir s'il va l'étudier).
Avant de tenter l'expérience, il vous faudra en sus prendre en considération ces éléments dans votre workflow :
a) la position de l'objet n'est pas référente à la zone d'affichage mais à son premier parent :
Ce qui signifie qu'un élément li placé ainsi se réfèrera à son parent ul/ol et non pas ni à html ni à body. Donc si votre ul n'a pas une taille suffisante, votre li va disparaître au scroll.
b) l'overflow du premier parent de l'[i]objet ne doit en aucun cas être stipulé ![/b]
Sinon la valeur sticky est littéralement ignorée.
c) avec un tel concept il faut bien garder en tête et les dimensions du média par lequel l'utilisateur accède ainsi que celle de l'objet. Hé oui, si votre objet est plus grand que la hauteur de la zone d'affichage vous perdrez 1000 points en accessibilité (valeur totalement subjective).
(d) votre objet et ses conteneurs devront faire partie du flux.)
PS: je dois vérifier ce point car je ne l'ai pas testé mais il me semble l'avoir lu.
3- Documentation
MDN - La propriété position en Css
Can I Use position:sticky in Css ? (en anglais)
Démonstration d'un usage de la position sticky en Css
Article de Css-Tricks sur le position sticky (en anglais)
Stickyfill le polyfill (en JS)
Fixed-sticky le polyfill (en JS)
Vous avez essuyé quelques plâtres et avez trouvé une solution malgré tout ? Partagez ci-dessous vos astuces et conseils à ce sujet. Modifié par Greg_Lumiere (02 Dec 2016 - 15:13)
) et qu'il faille peut-être mieux "taper une fois de plus sur le clou". 
