Posted By

joshuabaker on 11/02/09


Tagged

jquery footer sticky positioning bottom


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

jirimelcak
jannisg
wirenaught
Balamir


jQuery.stickyFooter


 / Published in: jQuery
 

  1. /**
  2.  * jQuery.stickyFooter - Sticky footer plugin
  3.  * @author Joshua Baker
  4.  * @version 1.0.0
  5.  */
  6. ;(function($){
  7.  
  8. // Defined jQuery.stickyFooterPos();
  9. // Outputs a console message until $(element).stickyFooter(); is run
  10. $.extend({
  11. stickyFooterPos: function() { console.log('jQuery.stickyFooterPos() has not been initialized.'); }
  12. });
  13.  
  14. // Define jQuery(element).stickyFooter();
  15. $.fn.extend({
  16. stickyFooter: function() {
  17. // Create the footer push element
  18. var stickyFooterPush = $('<div style="clear:both;"></div>');
  19.  
  20. // Append a clear to the bottom of the body to handle any potential float issues
  21. $('body').append('<div style="clear:both;"></div>');
  22.  
  23. // Place the footer push above the selected footer element
  24. $(this).before(stickyFooterPush);
  25.  
  26. // Re-define jQuery.stickyFooterPos();
  27. // This can be called at any point after
  28. $.extend({
  29. stickyFooterPos: function() {
  30. var documentHeight = $(document.body).height() - stickyFooterPush.height();
  31. var windowHeight = $(window).height();
  32. if (documentHeight < windowHeight) {
  33. stickyFooterPush.height(windowHeight - documentHeight);
  34. }
  35. }
  36. });
  37.  
  38. // Initial run (on DOM ready)
  39. $.stickyFooterPos();
  40.  
  41. // Bind events to loading, resizing and scrolling of the window
  42. $(window).bind('load resize scroll', $.stickyFooterPos);
  43. }
  44. });
  45.  
  46. })(jQuery);
  47.  
  48.  
  49.  
  50. /**
  51.  * jQuery.stickyFooter - Sticky footer plugin
  52.  * @author Joshua Baker
  53.  * @version 1.0.0
  54.  */
  55. ;(function(a){a.extend({stickyFooterPos:function(){console.log("jQuery.stickyFooterPos() has not been initialized.")}});a.fn.extend({stickyFooter:function(){var b=a('<div style="clear:both;"></div>');a("body").append('<div style="clear:both;"></div>');a(this).before(b);a.extend({stickyFooterPos:function(){var c=a(document.body).height()-b.height();var d=a(window).height();if(c<d){b.height(d-c)}}});a.stickyFooterPos();a(window).bind("load resize scroll",a.stickyFooterPos)}})})(jQuery);

Report this snippet  

You need to login to post a comment.