Mostrar pie de página si en el fondo de la página o la página es corta

Mira mi jsFiddle para ver qué está pasando: http://jsfiddle.net/Amp3rsand/EDWHX/2/

Si descomenta el segundo .content div en el artículo, verá el pie de página oculto como debería y luego se des-ocultará cuando llegue al final de la página. Mi problema es que me gustaría mostrar el pie de página cuando el contenido es más corto que la ventana gráfica, como cuando el segundo .content div está comentado.

(es decir, window.height> document.height ¿verdad?)

En mi sitio web real, los divs .content se reemplazan por diferentes divs con identificadores únicos para cada página, así que no pude encontrar la manera de dirigirlos específicamente. ¿Es lo que estoy haciendo la forma correcta de hacerlo?

Aquí está mi código para las personas que no quieren usar el jsFiddle por alguna razón:

HTML

<!--
-->

CSS

 article { min-height: 500px; background: black; padding: 10px; margin-bottom: 50px; } .content { height:500px; background: lightgrey; border: 1px dashed red; } footer { position: fixed; bottom: -50px; height: 40px; width: 100%; margin: 0 auto; text-align: center; border-top:2px solid #6ce6d5; background: white; z-index: 100; } #underfooter { position: fixed; bottom: -44px; background: blue; width: 100%; height: 40px; z-index: 90; } 

JQuery

 $(function(){ $('footer').data('size','hide'); }); $(window).scroll(function(){ if ($(window).scrollTop() + $(window).height() >= $(document).height() - 0) { if($('footer').data('size') == 'hide') { $('footer').data('size','show'); $('footer').stop().animate({ bottom:'0px' },400); $('#white2').stop().animate({ bottom:'6px' },400); } } else { if($('footer').data('size') == 'show') { $('footer').data('size','hide'); $('footer').stop().animate({ bottom:'-50px' },400); $('#white2').stop().animate({ bottom:'-44px' },400); } } }); $(document).ready(function() { if ($(window).height() >= $(document).height() ) { $('footer').data('size','hide'); } else { $('footer').data('size','big'); } }); 

Gracias a todos

Mira si esto es lo que quieres. Hice muchos cambios en su JS, lo que fue bastante para mí: http://jsfiddle.net/EDWHX/3/

JS:

 $(function(){ $('footer').hide(); if($(document).height() < $(window).height()){ $('footer').show(); } $(window).resize(function(){ console.log("resized"); if($(document).height() > $(window).height()){ console.log("hide footer now"); $('footer').slideUp('slow'); } else{ $('footer').slideDown('slow'); } }); }); $(window).scroll(function(){ if ($(window).scrollTop() + $(window).height() >= $(document).height() - 0) { $('footer').slideDown('slow'); $('#white2').stop().animate({ bottom:'6px' },400); } else { $('footer').slideUp('slow'); $('#white2').stop().animate({ bottom:'-44px' },400); } }); $(document).ready(function() { if ($(window).height() >= $(document).height() ) { $('footer').data('size','hide'); } else { $('footer').data('size','show'); } }); 

Cambios de CSS:

 footer { position: fixed; bottom:0px; height: 40px; width: 100%; margin: 0 auto; text-align: center; border-top:2px solid #6ce6d5; background: white; z-index: 100; } 

Acabo de actualizar jsfiddle, debe usar document.body.offsetHeight para obtener la altura del “contenido”.

Mire esta respuesta: ¿Cómo obtener la altura de todo el documento con JavaScript?

Y revise el jsfiddle para ver los cambios: http://jsfiddle.net/juaning/EDWHX/5/

$(document).ready(function() { var body = document.body, html = document.documentElement; console.log(body.offsetHeight >= html.offsetHeight , body.offsetHeight , html.offsetHeight); $('footer').data('size','show'); if (body.offsetHeight >= html.offsetHeight ) { $('footer').data('size','hide'); console.log('hide'); } else { $('footer').data('size','show'); $('footer').stop().animate({ bottom:'0px' },400); $('#white2').stop().animate({ bottom:'6px' },400); console.log('show'); } });