Fade in / out de posición fija div cuando el usuario se desplaza a la parte inferior de la página

Esto parece bastante elemental, pero estoy tratando de hacer que una división de pie de página de posición fija se deslice y desaparezca cuando un usuario se desplaza a la parte inferior de una página web y luego se desliza y desvanece cuando el usuario vuelve a subir. He buscado Stack Overflow y otros han sugerido soluciones, pero mi código hace que mi div solo se deslice y desaparezca. No puedo hacer que el div se deslice y desaparezca cuando el usuario retrocede.

Además, este div se desliza y se desvanece justo después de comenzar a desplazarme. Necesito que espere hasta que llegue al final de la página (o un div invisible que pueda colocar en la parte inferior de la página) antes de que mi div de posición fija se deslice y desaparezca.

¿Alguna sugerencia?

jQuery:

$(function() { $('#footer').css({opacity: 0, bottom: '-100px'}); $(window).scroll(function() { if( $(window).scrollTop + $(window).height() > $(document).height() ) { $('#footer').animate({opacity: 1, bottom: '0px'}); } }); }); 

HTML:

  

CSS:

 #footer { position: fixed; bottom: 0; width: 100%; height: 100px; z-index: 26; } 

¡Gracias por ayudar!

Creo que intentaría hacerlo algo como esto.

http://jsfiddle.net/lollero/SFPpf/3

http://jsfiddle.net/lollero/SFPpf/4 – Versión poco más avanzada.

JS:

 var footer = $('#footer'), extra = 10; // In case you want to trigger it a bit sooner than exactly at the bottom. footer.css({ opacity: '0', display: 'block' }); $(window).scroll(function() { var scrolledLength = ( $(window).height() + extra ) + $(window).scrollTop(), documentHeight = $(document).height(); console.log( 'Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight ) if( scrolledLength >= documentHeight ) { footer .addClass('bottom') .stop().animate({ bottom: '0', opacity: '1' }, 300); } else if ( scrolledLength <= documentHeight && footer.hasClass('bottom') ) { footer .removeClass('bottom') .stop().animate({ bottom: '-100', opacity: '0' }, 300); } }); 

HTML:

  

CSS:

 #footer { display: none; position: fixed; left: 0px; right: 0px; bottom: -100px; height: 100px; width: 100%; background: #222; color: #fff; text-align: center; } #footer p { padding: 10px; }