<!DOCTYPE html>
<style>
body {
height:1500px;
}
#fixed {
width:218px;
height:57px;
background:red;
position:fixed;
bottom:0;
margin-left:200px;
}
</style>
<div id="fixed"></div>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
(function(){
var footerHeight = 100;
$(window).scroll(function () {
var bottomOffset = $(document).height() - $(window).scrollTop() - $(window).height();
if (bottomOffset < footerHeight) {
$("#fixed").css('bottom', footerHeight - bottomOffset);
} else {
$("#fixed").css('bottom', 0);
}
});
})();
</script>
Это черновой вариант. Требует оптимизации. Также возможно лучше использовать getBoundingClientRect футера.