Transition pour déplacer des objets avec position: fixed?

Cela semble comme il se doit d'être un problème simple, mais je ne suis pas un CSS expert, et j'ai été me frappant la tête contre le mur en essayant de le comprendre. Donc j'ai un ContentHeader élément, et lorsque l'utilisateur fait défiler passé un certain point, je veux le faire glisser jusqu'à couvrir la NavigationHeader élément. Je vais changer la position de ContentHeader par la modification de la propriété className de "contenu de l'en-tête" à "le contenu de l'en-tête en haut", qui fonctionne, mais ContentHeader juste sauts dans la nouvelle position au lieu de la transition en douceur. C'est le CSS que j'utilise actuellement:

.content-header {
    position: fixed;
    top: 50;
    width: inherit;
    z-index: 1030;
    padding: 12px 15px 12px 15px;
    transition: top 1s linear;
}
.content-header.top {
    top: 0;
}

Si vous avez besoin de voir le JavaScript, laissez-moi savoir et je peux ajouter qu'en tant que bien, mais c'est simplement en train de faire ...

<section className={className} ...

... où la valeur d'un nom de classe varient selon l'endroit où ContentHeader doit être positionné. J'ai pensé que peut-être le problème était que ce qui se passe à l'intérieur d'une Réagir rendre bloc et qui sautait de la transition, mais j'ai essayé de changer la classe avec un événement onClick qui ne serait pas en vigueur d'un nouveau rendu, et les résultats ont été les mêmes. Si quelqu'un pouvait m'aider, j'apprécierais!

OriginalL'auteur dlwiest | 2017-03-09