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 se desvanece cuando el usuario se desplaza hacia arriba. He buscado en 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 esperar hasta que llegue a la parte inferior 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:
<div id="footer">
<!-- footer content here -->
</div>
CSS:
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
z-index: 26;
}