title: CSS/jQuery: Position element at bottom, but scroll up when footer comes into viewport
body: <p>This may be a semi-duplicate question, but I'm not finding anything that fully addresses what I'm trying to do.</p>
  
  <p>I've got a div with a fixed position, pinned to the bottom of the screen. Its z-index puts it over the main content. As expected, this sticks to the bottom of the screen when I scroll, and its background image partially overlaps the main content..</p>
  
  <p>Here's where it gets tricky: When the footer comes into the viewport, I would like the footer to push it up.</p>
  
  <p>I'm using a jQuery plugin to see when the footer comes into the viewport, and then change the position from fixed to relative. The problem is, when it does this, it jumps down below the main content div.</p>
  
  <p>Here's the plugin: Viewport Selectors for jQuery (Sorry can't post two links yet)</p>
  
  <p>Here's my jQuery</p>
  
  <pre><code>   $(function() {
      $(window).bind('scroll', function(event) {
          $('footer:in-viewport').each(function() {
            $('#extra1').css('position','relative')
          });
          $('#extra2:below-the-fold').each(function() {
  
          });
      });
  });
  </code></pre>
  
  <p>Here's my example, which isn't completely functional, but gives a good idea of what I'm trying to do: <a href="http://illtron.net/test/position/" rel="nofollow noreferrer">http://illtron.net/test/position/</a></p>
  
  <p>Also, I'm trying to figure out how to make things go back to the way they were when you scroll back up, and the footer goes below the fold again, but I'm a little confused by the plugin.</p>
  
  <p>Any ideas on how to solve this would be great. I'm open to taking it in a completely different direction if it looks like I'm doing this in a really stupid way.</p>