Esta puede ser una forma, fijate si te sirve.. Te dejo el codepen para que veas el funcionamiento y el codigo acá para que te sea mas comodo.
CodepenCódigo HTML :
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="contenido">CONTENIDO</div>
<div class="flotante"> FLOTANTE FIXED </div>
<div class="footer"><strong> FOOTER</strong> </div>
</body>
</html>
Código CSS :
*{
margin:0;
padding:0;
}
.contenido{
min-height:1000px;
background:darkred;
color:#fff;
text-align:center;
padding-top:100px;
}
.footer{
height:50px;
background:darkorange;
text-align:center;
}
.flotante{
left: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 120px;
//agregue estos 3 ultimos para visualizarlo bien en el ejemplo
background:#000;
color:#fff;
text-align:center;
}
Código Javascript :
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).height() + $(window).scrollTop() == $(document).height()) {
$('.flotante').animate({marginBottom:50}, 100);
} else {
$('.flotante').animate({marginBottom:0}, 100);
}
});
});
Código Javascript :
/*ACA EL JS CON LA EXPLICACION DE CADA PASO*/
$(document).ready(function(){
$(window).scroll(function(){ //ventana ante el evento scroll
if ($(window).height() + $(window).scrollTop() == $(document).height()) {
/*condicion, si el alto de la ventana + el scrollTop
es igual al tamaño total del documento
obtenemos que bottom es 0*/
$('.flotante').animate({marginBottom:50}, 100);
/*entonces animamos el flotante con
un margen de 50px que es
el "height" del footer, a velocidad 100 */
} else {
$('.flotante').animate({marginBottom:0}, 100);
/*si el bottom no es 0, entonces
regresamos el margin bottom a 0*/
}
});
});
