Points clés
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. 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". position: sticky" est limitée. Cependant, certains polyfills peuvent être utilisés pour fournir cette fonctionnalité, notamment le bâton 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 tâche.
Dans cet article, nous discuterons de position: sticky, qui est la nouvelle solution CSS à ce problème.
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:
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:
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:
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.
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.
La prise en charge de cette nouvelle valeur est actuellement très mauvaise. Voici la situation de pile pour chaque navigateur:
-webkit (c'est-à-dire position: -webkit-sticky) Voir position: sticky On puis-je utiliser… pour tous les détails.
Heureusement, il existe de nombreux polyfills à choisir:
position: sticky position: sticky Demo Codepen (jQuery requis) 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
Comment définir la police Dreamweaver
Quel logiciel utilisez-vous pour ouvrir les fichiers DAT ?
Comment supprimer des données dans MongoDB
oracle nvl
Le WiFi est connecté mais il y a un point d'exclamation
Quels sont les logiciels bureautiques
Logiciel gratuit pour créer des sites Web
largeur de décalage
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
