title: Transition for moving objects with position: fixed?
body: <p>This seems like it should be a simple problem, but I'm by no means a CSS expert, and I've been beating my head against the wall trying to figure it out. So I've got a ContentHeader element, and when the user scrolls down past a certain point, I want it to slide up to cover the NavigationHeader element. I'm changing the position of ContentHeader by changing the className property from "content-header" to "content-header top", which works, but ContentHeader just jumps into the new position instead of transitioning smoothly. This is the CSS I'm using currently:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>If you need to see the JavaScript, let me know and I can add that as well, but it's basically just doing ...</p>
  
  <pre><code>&lt;section className={className} ...
  </code></pre>
  
  <p>... where the value of className would vary depending on where ContentHeader should be positioned. I thought maybe the problem was that this is happening inside a React render block and that was skipping the transition, but I tried changing the class with an onClick event that wouldn't force a re-render, and the results were the same. If anyone could help, I'd appreciate it!</p>