title: Scrolling a div with a header but keeping it fixed at 20px top when header disappears
body: <p>I want to display a notification on a page with a header, like this:</p>
  
  <pre><code>+-------------------------------+
  | header                        |
  +-------------------------------+
  |                [notification] |
  | first line of my text         |
  |    second line of my text     |
  :                               :
  </code></pre>
  
  <p>However when I scroll down, the notification should scroll with the page below the header, but up to the minimum where its <code>top</code> is at <code>20px</code>. So when we're scrolling, the viewport should stay like this:</p>
  
  <pre><code>| header                        |
  +-------------------------------+
  |                [notification] |
  | first line of my text         |
  |    second line of my text     |
  :                               :
  </code></pre>
  
  <p>But eventually when the header starts to disappear from the page, I am fine with the notification appearing atop of my text, with its <code>top</code> at <code>20px</code>:</p>
  
  <pre><code>+-------------------------------+
  |                [notification] |
  | first line of my text         |
  |    second line of my text     |
  |       third line of my text   |
  :                               :
  </code></pre>
  
  <p>And with further scrolling:</p>
  
  <pre><code>| first line of m[notification] |
  |    second line of my text     |
  |       third line of my text   |
  |           fourth line of my t |
  :                               :
  </code></pre>
  
  <p>So basically want to display a <code>display: fixed;</code> div with <code>top: 20px</code> <em>except</em> when the page is on top. </p>
  
  <p>So when I first see the page its <code>top</code> property should be at <code>60px</code>. However if I scroll down, I want it to have its <code>top</code> constantly at <code>20px</code>.</p>
  
  <p>How can I achieve this?</p>