title: Change margin top of div based on window scroll
body: <p>I have a bar at the top of my page that is position fixed. When the user scrolls to a certain point I want the bar to start moving up as if it was relatively or absolutely positioned.</p>
  
  <p>Right now the css of the bar changes from fixed to absolutely positioned but of course this sets the div straight to the top of the page.</p>
  
  <p>I have been looking at this for ages and cannot get my head around how I would push the bar up one pixel at a time for every pixel scrolled past the _triggerOffset</p>
  
  <p>Can anyone enlighten me?</p>
  
  <pre><code>function banner(){
  
      var _barOffset = $('#top-bar').outerHeight(),
          _navOffset = $('#navigation').offset().top,
          _triggerOffset = _navOffset-_barOffset;
  
      $(window).scroll(function() {
  
          var _scroll = $(window).scrollTop();
  
          if (_scroll &gt;= _triggerOffset) {
              $('#top-bar').css({'position':'absolute'});
          }
  
      });
  
  }
  
  banner();
  </code></pre>