Want a basic sticky footer in iOS (4/5) and Android Devices?

footer.css

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
}

sticky.footer.js

// same effect as: http://jquerymobile.com/demos/1.0/docs/toolbars/bars-fixed.html 
// but without the massive library and show/hide instead of fades

// this is a simple .show and .hide, but if you want the exact same paradigm as
// jquery mobile you can use css3 transitions with .fade.in and .fade.out classes
// note: i haven't been able to get fade in/out working good, but show/hide works fine.

// dependencies: zepto.js, underscore.js

// my footer is <div class='footer'></div> and has an approximate height of 40px

function updateFooter() {   
  $('.footer').css('top', window.innerHeight + window.scrollY - 40 + "px");
}

$(document).bind('touchstart', function(e) {
  if(!$(e.target).parents(".footer").length > 0) { // to avoid hiding the footer if it is node 'touched' by the user
    $('.footer').hide();
  };
});

$(document).bind('touchend', function() {
  _.defer(function() { // handles waiting until snapback scrolling on mobile devices has finished
    $('.footer').show();          
  });
});

$(document).bind('scroll', function(e) {
  updateFooter();
});