Positionnement collant avec rien mais CSS

Les éléments collants, lorsque l'utilisateur fait défiler jusqu'à un certain point, est devenu un modèle courant dans la conception Web moderne. Vous verrez qu'il s'applique à la navigation du haut, à la barre latérale, aux liens de partage ou peut-être à des publicités. conserver la visibilité dans la fenêtre lorsque l'utilisateur fait défiler. 

Historiquement, nous avons besoin de JavaScript pour le faire. Toutefois, un comportement collant a été proposé (et rédigé) en tant que nouvelle norme (le gluant position), ce qui nous permet d’atteindre cet effet avec du CSS pur. Voyons comment cela fonctionne!

Position collante

gluant est une nouvelle valeur pour le position propriété, ajoutée dans CSS3 Layout Module Spec. Il agit de la même manière que relatif positionnement, en ce sens qu'il ne supprime rien du flux de documents. En d'autres termes, un élément collant n'a aucun effet sur la position des éléments adjacents et ne réduit pas son élément parent.

À partir de l'exemple suivant, nous définissons la #sidebar position à gluant de même que en haut: 10px. La valeur supérieure est requise et spécifie la distance entre le bord supérieur de la fenêtre où l'élément bâton. 

#sidebar position: -webkit-sticky; // requis pour la position Safari: sticky; en haut: 0; // requis aussi.  

Maintenant, lorsque nous faisons défiler la page, lorsque la distance entre la barre latérale et le haut de la fenêtre atteint 0, la barre latérale devrait coller, nous donnant effectivement une fixé position. En d'autres termes, le gluant est une sorte d'hybride entre relatif et fixéposition.

Nidification

De plus, le gluant La position fonctionnera dans une boîte de défilement ou un élément débordant. Cette fois, nous allons définir le Haut à 15px pour donner un peu plus d'espace au-dessus de la barre latérale quand il est collant positionné (oui, c'est un mot).

La barre latérale restera collante tout au long de la hauteur du parent (c'est-à-dire que lorsque le bas du parent atteindra le bas de la barre latérale, il le "repoussera" une fois de plus de la page.)

Facile, n'est-ce pas?

Soutien

Si vous visualisez ces démos sous Chrome, Opera ou Internet Explorer (et Blink), vous vous êtes déjà rendu compte qu'elles ne fonctionnent pas. Ces navigateurs ne supportent pas encore la gluant valeur.

Prise en charge du navigateur de positions CSS Sticky

Dans Chrome 28, lorsqu'il est passé au moteur Blink, Chrome a décidé de supprimer le gluant position de sa base de code, et il a même supprimé l’option permettant de l’activer via le chrome: // drapeaux page. La raison étant:

«L'implémentation actuelle de la position collante dans Blink ne s'intègre pas correctement avec la composition ou le défilement. Nous voulons éventuellement mettre en œuvre la position sticky, mais la mise en œuvre actuelle montre la voie à suivre pour améliorer le défilement et la composition. Une fois que le défilement et la composition sont en meilleure forme, nous pouvons réintroduire la position collante de manière à s’intégrer correctement au reste du système..

Une fois l’alternative est d’appliquer un polyfill simuler l'effet dans les navigateurs non compatibles.

Utiliser le Polyfill

Pour aider nos navigateurs non compatibles, nous utiliserons le stickyfill développé par Oleg Korsunsky. Le polyfill fonctionne bien dans diverses circonstances. Si l'élément désigné a un remplissage, des marges, des bordures, a été flotté ou formé avec des unités relatives telles que em et le pourcentage, le polyfill imitera exactement le CSS gluant comportement de position. Et utiliser stickyfill est tout aussi intuitif.

Pour commencer, récupérez stickyfill.js (éventuellement avec jQuery, si vous maîtrisez mieux et préférez utiliser jQuery pour sélectionner des éléments). Liez ces bibliothèques dans votre document HTML. Ensuite, lancez l'adhésif avec l'élément désigné, comme suit:

var sidebar = document.getElementById ('sidebar'); Stickyfill.add (barre latérale); 

Si vous utilisez jQuery, vous pouvez également écrire ce qui suit:

$ ('# sidebar'). Stickyfill (); 

Maintenant, notre barre latérale collante devrait fonctionner sur les navigateurs, y compris Chrome et Opera. Le polyfill est suffisamment intelligent pour ne fonctionner que dans des navigateurs non compatibles, sinon il sera complètement désactivé, ce qui le mettra de côté pour l'implémentation native du navigateur..

Mises en garde

Il y a quelques autres choses à noter avant de vous lancer et d'utiliser gluant position sur vos sites:

• Tout d'abord, la hauteur du conteneur parent doit être supérieure à celle de l'élément collant.
• Bien que Safari prenne en charge de manière native la position collante de CSS (bien que préfixé), il ne sera pas pris en compte si cette position est utilisée sous un élément avec CSS. affichage: table;. C'est un bug.
• Le polyfill a ses propres défauts, en ce sens qu'il ne fonctionne pas dans une boîte débordée..
• Au moment de la rédaction de cet article, il n’existe aucun gestionnaire d’événements JavaScript permettant à Sticky d’identifier le moment où l’élément est coincé. Un tel un événement peut être utile, par exemple, pour ajouter des classes supplémentaires lorsque l'élément est collé (cela peut ne pas être un mot).

Pensées finales

La position collante de CSS pourrait être un outil brillant si vous avez simplement besoin d'un élément collant simple. Si vos besoins vont au-delà de cela, vous voudrez peut-être opter pour une bibliothèque JavaScript comme Waypoints.js avec son module Sticky..

Néanmoins, nous espérons voir très prochainement des améliorations majeures du collage de CSS, tant au niveau de ses capacités que de la prise en charge des navigateurs..

Références supplémentaires

• Pourquoi (collant) JS n'est pas idéal?
• Brouillon de travail CSS
• Astuce: Navigation collante, sans le saut maladroit d'Adi Purdila

Learn CSS: Le guide complet

Nous avons créé un guide complet pour vous aider à apprendre le CSS, que vous soyez débutant avec les bases ou que vous souhaitiez explorer un CSS plus avancé..