title: CSS animation: drop in from top of fold
body: <p>I'm working on a notification bar fixed at the top that drops down when a user hovers over it.  It works perfectly, except when the user scrolls down the page and hovers over it.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="bar"&gt;&lt;/div&gt;
  &lt;div class="message"&gt;&lt;h1&gt;You have no new notifications!&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="container"&gt;
  
  
   &lt;h1&gt;notification bar&lt;/h1&gt;
    &lt;h2&gt;hover above&lt;/h2&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
    margin:0;
    padding:0;
    font-family:"Helvetica Neue", Helvetica, Sans-serif;
    word-spacing:-2px;
  }
  
  #bar {
    height: 7px;
  background-size: cover;
  background-position: left 60%;
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hidden;
  z-index: 1000;
  background-color: #FD4F2F;
  }
  
  h1 {
    font-size:40px;
    font-weight:bold;
    color:#191919;
    -webkit-font-smoothing: antialiased;
  }
  
  h2 {
    font-weight:normal;
    font-size:20px;
    color:#888;
    padding:5px 0;
  }
  
  .message {
  background:#181818;
  color:#FFF;
  position: absolute;
  top: -250px;
  left: 0;
  width: 100%;
  height: 150px;
  padding: 20px;
  transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  overflow: hidden;
  box-sizing: border-box;
  
  }
  
  .message h1 {
    color:#FFF;
  }
  
  
  .container {
  transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
    padding:5em 3em;
    height: 500px;
  }
  
  
  #bar:hover + .message {
    top: 0;
  }
  /* on mouse hover message, stay on top */
  .message:hover {
    top: 0;
  }
  
  #bar:hover + .container {
    margin-top: 150px;
  }
  
  #bar:hover + label {
    background:#dd6149;
  }
  </code></pre>
  
  <p>Here's a <a href="http://codepen.io/anon/pen/MYeRpX" rel="nofollow">codepen</a>.</p>