Création d'une barre adhésive dans l'interface utilisateur sémantique (React). La page saute lors du défilement
J'utilise le composant en sémantique pour créer un en-tête du menu supérieur et du fil d'Ariane. Pour une raison quelconque, la barre de défilement "saute" lorsque vous essayez de faire défiler de la position la plus haute
Sandbox https://codesandbox.io/s/y7k3zn5qn1
Je n'ai pas fourni l'accessoire context au composant collant. Dans les exemples , ils ont toujours fourni la référence DOM React du div englobant comme accessoire de contexte au composant Sticky. La documentation n’est pas claire quant à l’objet de la propriété context. (On dit "Contexte auquel l'élément collant doit coller")
Dois-je fournir un accessoire de contexte au composant collant pour arrêter le défilement "sauté"? Si tel est le cas, comment puis-je décider quelle div ref englobante doit être utilisée comme accessoire de contexte?
J'ai utilisé un composant Rails pour envelopper le composant Sticky et appliquer un décalage de remplissage/marge au frère. Le rail permet au sticky de se superposer et de ne pas faire partie de la division parent. Il suffit d’ajouter des fichiers css personnalisés au rail pour remplacer le comportement par défaut. La référence de contexte permet de coller l’adhésif dans le contexte de cet élément.
Quelques modifications ont été apportées au code sandbox Exemple de menu persistant
Lors du défilement, position:fixed; est ajouté au parent de <div class="ui inverted menu">. Cela déplace l'élément de la structure du dom en retirant ainsi l'espace qu'il occupait. Par conséquent, le frère ou la sœur se lève pour occuper l'espace libre.
Vous pouvez ajouter manuellement margin-top au frère pendant que la position est définie comme étant une solution de contournement.