title: issue changing height with jQuery and waypoints.js
body: <p>I have a fixed position footer that gets it's top position from a jquery function. Using waypoints, when I scroll down so #main is 'bottom-in-view' I cannot get the height of the footer to change. Anyone have any ideas? Ultimately this will need to slide down and reveal more footer content. <a href="http://jsfiddle.net/eqP2j/" rel="nofollow">here is the fiddle</a> Is there anyway to animate height on a fixed position element?</p>
  
  <p>Here is the jQuery code:</p>
  
  <pre><code>$(function(){
          var position = function () {
              var w = $(window).height();
              var f = $('footer').height();
              var foo = (w-f);
              $('footer').css('top', foo);
          };
          $(document).ready(position);
          $(window).resize(position);
  
          if (screen.width &gt;= 768){
                  $('#main').waypoint(function(direction) {
                      if (direction === 'down') {
                          $('footer').css({'height': "500px"});
                          alert('hit rock bottom');
                      }
                  }, { offset: 'bottom-in-view' })
                  .waypoint(function(direction){
                      if (direction === 'up') {
                          //$('footer').animate({height:'110px'},300);
                      }
                  }, { offset: 'bottom-in-view' });
          }
      });
  </code></pre>