title: Parallax scroll a background image into permanent view
body: <p>The affect I'm going for is something I can only compare to Google+ top navigation effect and through some parallax into that. That is, when you scroll down, the search bar disappears and your left with a small "toolbar". I found some <a href="https://stackoverflow.com/questions/17586162/how-do-i-change-my-background-on-scroll-using-css/17588740#17588740">jQuery</a> to help me out and I will mess with after I figure this out.</p>
  
  <p>What I'm trying to do first, is get a background image to scroll from below the bar (see the jfiddle) and scroll up to the bar where it will eventually stay put. This is what I've got so far:</p>
  
  <pre><code>&lt;section id="account-bar" class="shelf navbar-fixed-top"&gt;
      &lt;div class="navbar-header"&gt;
          more...
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Links&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>with the associated css:</p>
  
  <pre><code>section#account-bar {
      background-color:#111;
      color:#ccc;
      font-size:1.1em;
      height:3.6em;
  line-height:3.4em;
      text-align:right
  }
  
  section#account-bar:after {
      content:'';
      width:267px;
      height:46px;
      background:url('http://lorempixel.com/267/46/') no-repeat 0 0 scroll;
      background-size:267px 46px;
      top:0;
      left:0;
      position:absolute;
  }
  </code></pre>
  
  <p>EDIT: Here's that <a href="http://jsfiddle.net/qPHPT/1/" rel="nofollow noreferrer">jsFiddle</a></p>