Position: Sticky La clé de la mise en ?uvre d'une barre de navigation collante ou d'une barre latérale est de définir correctement les propriétés de positionnement et de comprendre les restrictions d'utilisation. 1. Il doit être utilisé avec le haut, le bas, la gauche ou la droite, et le conteneur parent ne peut pas avoir des propriétés telles que le débordement: caché, transformée ou filtre; 2. Lorsqu'il est utilisé dans la barre de navigation, l'index z et les couleurs d'arrière-plan doit être défini pour assurer la visibilité et la lisibilité, et faire attention à la relation hiérarchique de plusieurs éléments collants et des problèmes d'occlusion de contenu; 3. Lors de la mise en ?uvre de la barre latérale, vous devez définir la valeur supérieure et la hauteur: le contenu de l'ajustement pour empêcher l'écran d'être plein, et le support de défilement doit être ajouté si nécessaire; 4. Faites attention à la compatibilité. Les navigateurs grand public ont un bon soutien, mais IE ne le prend pas en charge, et des alternatives sont nécessaires pour éviter les pièges de style commun. Ce n'est qu'en ma?trisant ces points clés que vous pouvez assurer des travaux collants comme prévu.

L'utilisation position: sticky pour implémenter une barre de navigation ou une barre latérale collante est une pratique pratique et non difficile à mettre en ?uvre. Il permet à un élément de ?coller? à l'écran lors du défilement d'une page, tels que la navigation supérieure commune ou les menus latéraux. La clé est de comprendre ses conditions et ses limites d'utilisation, sinon il est facile de "comment il ne prend pas effet".

1. Grammaire de base et conditions nécessaires

position: sticky semble simple, mais doit être utilisé avec top , bottom , left ou right , sinon il échouera. Par exemple:

 .Sticky-Nav {
  Position: collante;
  en haut: 0;
}

Après avoir écrit de cette fa?on, .sticky-nav sera fixé à l'écran lors du défilement à 0px du haut.
Mais note:

• Il doit avoir une valeur de positionnement claire (comme top: 0 ) et ne peut pas simplement écrire position: sticky .
• Le conteneur parent ne peut pas être overflow: hidden ou transform , filter et autres attributs, sinon Sticky sera désactivé.
• L'élément collant est positionné par rapport à l'élément ancêtre de défilement le plus récent, plut?t que sur toute la page.

2. Pratiques communes utilisées sur la barre de navigation

La barre de navigation supérieure est le scénario d'application le plus courant. Vous pouvez le mettre en haut de la page afin qu'il soit toujours visible lors du défilement:

 <nav class = "sticky-nav"> ... </ nav>

 .Sticky-Nav {
  Position: collante;
  en haut: 0;
  Z-Index: 1000;
  Contexte: blanc;
}

z-index est ajouté pour éviter d'être couvert par un autre contenu, et la couleur d'arrière-plan est de rendre le contenu lisible (surtout lors du défilement).
En pratique, vous pouvez rencontrer:

• Lorsque la page a plusieurs éléments collants, ils sont écrasés à leur tour
• Le contenu sous la barre de navigation peut être bloqué, vous pouvez utiliser margin-top pour ajuster l'espacement.

3. Comment réaliser un effet collant dans la barre latérale

En plus de la navigation supérieure, la barre latérale peut également être fixée avec collante. Structurellement, il y a généralement une zone de gauche plus la zone de contenu principale:

 <div class = "conteneur">
  <à part classe = "barre latérale"> Il s&#39;agit de la barre latérale </roprops
  <main class = "contenu"> Contenu principal </-main>
</div>

Le CSS correspondant peut être écrit comme ceci:

 .sidebar {
  Position: collante;
  En haut: 20px; / * Commencez à réparer à une certaine distance du haut * /
  Hauteur: Fit-contenu; / * Empêcher la hauteur de l'écran d'être pleine * /
}

De cette fa?on, lorsque l'utilisateur fait défiler la page, la barre latérale s'arrête à la bonne position et ne dépasse pas la hauteur du contenu.
Conseils:

• Ajouter max-height et overflow-y: auto au .sidebar
• Faites attention à la largeur de mise en page pour éviter les éléments collants affectant la disposition du contenu principale

4. Compatibilité et précautions

Bien que les navigateurs grand public prennent en charge position: sticky , il n'est pas applicable dans les versions plus anciennes (telles que IE). Si vous devez être compatible avec ces environnements, vous devrez peut-être utiliser JavaScript pour simuler ou envisager des alternatives.

Quelques autres endroits sujets aux pièges:

• Oublié de régler top ou left , résultant en invalide
• Le conteneur parent a été défini sur overflow: hidden , collant n'est pas valide
• Le conteneur de défilement n'est pas la fenêtre elle-même (comme faire défiler à l'intérieur d'une div), et un comportement collant sera différent

Fondamentalement, c'est tout. La clé de l'utilisation de position: sticky est de déterminer les limites de contexte et de style dont il dépend. Il semble simple, mais si les détails ne sont pas gérés correctement, des problèmes se poseront facilement.

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!