Points clés

La propriété
• CSS position: sticky du CSS permet à la barre de navigation ou à d'autres éléments de rester visibles lorsque l'utilisateur défile sans être épinglé sur la page. Cette propriété agit comme une position statique dans son élément parent jusqu'à ce que le seuil de décalage donné soit atteint, à quel point il est comme si la valeur était définie sur fixed.
• La fa?on traditionnelle d'atteindre cet effet implique JavaScript, où les événements de défilement d'une page sont écoutés et utilisent JavaScript pour modifier les valeurs des propriétés position et top en fonction de la position actuelle de la fenêtre. Cependant, lorsque la position de l'élément se transforme en fixed, cette méthode peut entra?ner des problèmes, ce qui le fait quitter le flux de page et l'élément ci-dessous "saute".
• Actuellement, la prise en charge du navigateur de l'attribut "position: sticky" est limitée. Cependant, certains polyfills peuvent être utilisés pour fournir cette fonctionnalité, notamment le baton fixe pour le groupe de filament, la position - plongeant - pour Matthew Phillips et le remplissage collant pour Oleg Korsunsky.

Si vous avez lu l'article d'Annarita Tranfic "Le design évident toujours", vous pouvez être d'accord avec elle:

Les gens s'attendent à voir des motifs communs: trouvez le menu principal en haut de la page, trouvez la zone de recherche dans le coin supérieur droit, trouvez le pied de page en bas, etc.

Je conviens que les gens s'attendent à ce que certains composants du site Web soient placés dans un endroit spécifique, qui, à mon avis, est plus important pour le menu principal.

Parfois, en raison des exigences des clients ou parce que nous avons déterminé qu'il s'agit de la meilleure approche, nous pouvons avoir besoin que la navigation principale soit toujours visible sur la page sans l'épingler en place, essentiellement en suivant le contenu de la page. Ces dernières années, de nombreuses solutions basées sur JavaScript ont été publiées parce que CSS à elle seule ne peut pas terminer cette tache.

Dans cet article, nous discuterons de position: sticky, qui est la nouvelle solution CSS à ce problème.

Quels problèmes résolvons-nous?

Avant de discuter de la nouvelle valeur de cette propriété position, faisons mieux comprendre le problème que nous essayons de résoudre.

Supposons que le menu principal de notre merveilleux site Web soit après le titre, mais qu'il est toujours en haut de la page (pas dans la barre latérale) et prend toutes les largeurs disponibles. Cela pourrait ressembler à ceci:

Codepen Exemple de lien

Ce que nous voulons réaliser, c'est que lorsque l'utilisateur fait défiler la page, une fois que le menu est uni en haut de la fenêtre position: fixed Idem (uniquement lorsqu'il atteint le haut de la fenêtre).

Pour y parvenir avec du code traditionnel, nous devons ajouter du javascript. Nous écoutons les événements de défilement sur la page et utilisons JavaScript pour modifier les valeurs des propriétés position et top basées sur la position actuelle de la fenêtre. Plus précisément, lorsque le menu est en haut de la fenêtre, nous devons ajouter top: 0 et position: fixed au menu, sinon l'attribut sera restauré à sa valeur par défaut.

Une autre approche similaire consiste à créer une classe dans notre CSS qui contient ces valeurs, puis à ajouter et supprimer la classe en utilisant JavaScript au besoin, qui pourrait ressembler à ceci:

var menu = document.querySelector('.menu')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition) {
        menu.style.position = 'fixed';
        menu.style.top = '0px';
    } else {
        menu.style.position = 'static';
        menu.style.top = '';
    }
});

Notez que cet extrait de code ne gère pas les anciennes versions d'Internet Explorer. Si vous avez besoin de traiter ces navigateurs (pauvres!), Je fournirai des options de polyfill que vous pouvez considérer.

La démonstration en temps réel de cette deuxième étape est la suivante:

Codepen Exemple de lien

Mais attendez! Pouvez-vous trouver le problème causé par ce code? De nombreuses implémentations que j'ai vues, y compris celles que nous avons développées jusqu'à présent, n'ont pas pris en compte un problème important. Lorsque nous modifions la position de l'élément en fixed, il laisse le flux de la page, donc l'élément ci-dessous "sautera" approximativement égal au nombre de pixels à la hauteur de l'élément (la hauteur de ce "saut" dépend sur les marges, les bordures, etc.).

Une solution possible consiste à injecter un élément d'espace réservé de la même taille que l'élément que nous voulons "coller" afin que lorsque nous mettons à jour le style de l'élément collant, il n'y a pas de saut. De plus, si la valeur correcte a été définie, nous ne voulons pas réaffecter la valeur à plusieurs reprises sans raison. Enfin, nous voulons adopter la technique que j'ai décrite en utilisant la classe CSS.

La version finale du code JavaScript est la suivante:

var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;

window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition.top && !isAdded) {
        menu.classList.add('sticky');
        menu.parentNode.insertBefore(placeholder, menu);
        isAdded = true;
    } else if (window.pageYOffset < menuPosition.top && isAdded) {
        menu.classList.remove('sticky');
        menu.parentNode.removeChild(placeholder);
        isAdded = false;
    }
});

Il s'agit du bloc de déclaration de la classe sticky:

.sticky {
    top: 0;
    position: fixed;
}

Le résultat final est affiché dans cette prochaine démo:

Codepen Exemple de lien

Maintenant que vous avez une bonne compréhension de ce qu'est le problème et de la solution possible basée sur JavaScript, il est temps d'embrasser la modernisation et de discuter de ce que position: sticky.

Qu'est-ce que la position: collante?

Si vous lisez soigneusement la section précédente, vous vous demandez peut-être "Pourquoi le navigateur ne peut-il pas faire ?a pour moi?"

sticky est une nouvelle valeur introduite pour la propriété CSS position. Cette valeur doit se comporter comme position: static dans son élément parent jusqu'à ce que le seuil de décalage donné soit atteint, auquel cas il est comme si la valeur était définie sur fixed. En d'autres termes, en utilisant position: sticky, nous pouvons résoudre les problèmes discutés dans la section précédente sans javascript.

Revoir notre exemple précédent et en utilisant cette nouvelle valeur, nous pouvons écrire:

.menu {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #bffff3;
    position: sticky;
}

Le navigateur fera le reste! C'est aussi simple que cela.

Prise en charge du navigateur et polyfills

La prise en charge de cette nouvelle valeur est actuellement très mauvaise. Voici la situation de pile pour chaque navigateur:

• Firefox 26 - Prise en charge de la définition de css.sticky.Enabled to "true" Under About: config.
• Chrome 23 - Soutenu par l'activation des fonctionnalités de plate-forme Web expérimentales dans Chrome: // Flags.
• Chrome 38 (?) - L'équipe Chrome a récemment supprimé cette fonctionnalité de Blink, donc elle n'est actuellement pas disponible dans Chrome Canary (version 38.x), même avec le drapeau. Vous pouvez lire le rapport de bogue expliquant la suppression, mais nous soup?onnons que cette fonctionnalité sera remplacée bient?t et ne peut pas interrompre le support de la version stable.
• Safari 6.1 - Soutenez cette valeur à l'aide du préfixe du fournisseur -webkit (c'est-à-dire position: -webkit-sticky)
• Opera 23 - Prise en charge de l'activation des fonctionnalités de plate-forme Web expérimentales dans environ: drapeaux.
• Internet Explorer - Non pris en charge (voir statut)

Voir position: sticky On puis-je utiliser… pour tous les détails.

Heureusement, il existe de nombreux polyfills à choisir:

• FILAMENT GROUPS FIXE STTICKY (nécessite jQuery)
• Position de Matthew Phillips - Sticky- (détection avec modernizr)
• position: sticky
dans la bibliothèque Polyfill.js de Philip Walton
• Fabrice Weinberg's position: sticky Demo Codepen (jQuery requis)
• Oleg Korsunsky's Stickyfill (IE9)

démo

La démonstration suivante montre l'effet réel de position: sticky. Comme mentionné précédemment, pour le faire fonctionner et selon le navigateur que vous utilisez, vous devrez peut-être activer un drapeau.

Codepen Exemple de lien

Conclusion

Bien que cette nouvelle fonctionnalité n'ait pas une bonne prise en charge du navigateur, vous pouvez également plut?t utiliser Polyfill, si vous définissez des styles alternatifs avec Modernizr, il se rétablira gracieusement vers la valeur par défaut position: static ou position: fixed.

Si vous avez essayé cette propriété ou que vous connaissez tout autre polyfill, veuillez nous en informer dans les commentaires.

FAQ sur la position CSS Sticky (FAQ)

Quelle est la différence entre la position CSS collante et les autres emplacements CSS?

CSS position: sticky est un mélange de positionnement relatif et de positionnement fixe. Il permet à un élément de se comporter comme une position relative dans son élément parent jusqu'à ce qu'il atteigne un point de défilement donné, à quel point il devient une position fixe. Ceci est différent des autres emplacements CSS. Par exemple, la position "relative" vous permet de positionner un élément par rapport à la position normale de l'élément, tandis que la position "fixe" positionne l'élément par rapport à la fenêtre du navigateur, et il ne bougera pas même si la page est défilée . La position "absolue" localise l'élément par rapport à l'ancêtre positionné le plus récent, "statique" est la valeur par défaut et localise l'élément en fonction du flux normal de la page.

Pourquoi ma position CSS est-elle collante ne fonctionne pas?

Votre CSS position: sticky ne fonctionne pas pour plusieurs raisons. Une raison courante est que l'attribut de l'élément parent overflow est défini sur hidden, auto ou scroll. Une autre raison peut être que l'élément collant a un frère plus élevé que de sa s?ur, ce qui le fait défiler de la fenêtre. Assurez-vous également que l'élément collant n'est pas un élément de table, car dans certains navigateurs, CSS position: sticky ne fonctionne pas avec les éléments de table.

Comment faire en sorte que CSS positionne le travail collant sur tous mes navigateurs?

Bien que CSS position: sticky soit largement pris en charge dans les navigateurs modernes, il peut ne pas fonctionner dans certaines versions plus anciennes. Pour assurer la compatibilité entre tous les navigateurs, vous pouvez utiliser le polyfill. Polyfill est un script qui fournit la technologie que vous attendez de fournir nativement au navigateur. Un polyfill populaire pour CSS position: sticky est un remplissage collant.

Puis-je utiliser la position CSS collante avec d'autres propriétés CSS?

Oui, vous pouvez utiliser CSS position: sticky avec d'autres propriétés CSS. Par exemple, vous pouvez l'utiliser avec z-index pour contr?ler l'ordre d'empilement, ou avec box-shadow pour créer un effet d'ombre lorsque les éléments deviennent collants.

Comment le CSS positionne-t-il Sticky se comporte-t-il dans un récipient à défilement?

Lorsque l'élément collant est à l'intérieur du récipient en roulage, il colle en haut du récipient lorsque vous faites défiler vers le bas, et il cesse de coller lorsque le bord inférieur du récipient passe.

Puis-je utiliser la position CSS collante au bas de l'élément?

Oui, vous pouvez utiliser CSS position: sticky au bas de l'élément. Il vous suffit de spécifier une valeur négative pour l'attribut bottom. Cela fera que l'élément collera au bas du récipient.

position CSS collante Comment fonctionne-t-il avec les marges?

Mariages et CSS position: sticky fonctionnent de la même manière qu'ils fonctionnent avec le positionnement relatif. La marge déplacera l'élément collant par rapport à sa position collante, plut?t qu'à sa position d'origine.

Puis-je utiliser la position CSS collante pour le défilement horizontal?

Oui, vous pouvez utiliser CSS position: sticky pour le défilement horizontal. Il vous suffit de spécifier une valeur pour l'attribut left ou right, pas l'attribut top ou bottom.

Comment utiliser la position CSS collante pour contr?ler les décalages de défilement?

est contr?lé par les propriétés top, right, bottom et left. Les valeurs que vous spécifiez pour ces propriétés déterminent la distance au bord correspondant de la fenêtre où l'élément commence à coller.

Puis-je utiliser la position CSS collante avec la transition CSS?

Oui, vous pouvez utiliser CSS position: sticky avec les transitions CSS. Cependant, n'oubliez pas que la transition ne s'applique que lorsque l'élément passe d'une position relative à une position fixe, et non lorsqu'elle est collée.

Notez que j'ai remplacé le lien Codepen avec un espace réservé car je ne peux pas accéder à l'exemple de codepen réel. Vous devez remplacer ces espaces réservés par le lien réel. De plus, j'ai réécrit le texte d'origine autant que possible, s'effor?ant de rendre l'article plus lisse et plus naturel sans changer la signification d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!