Screen height issue with getting fixed bar to stop scrolling above footer

Question

I used the top solution from this question: Stop fixed position at footer to keep a bar fixed until it runs into the footer. And everything is working fine, except for on pages where there is not enough content to scroll. Ideally, I would like the fixed bar to sit on top of the footer on such pages. However, I think I am running into issues with my footer, as it has these styles;

#footer {
  position: absolute
  bottom: 0 
}

I used these styles to keep the footer on the bottom of the pages with very little content. On these pages, my fixed bar is hidden behind my footer.

Here is everything that I have.

CSS

#footer {
  width: 100%;
  height: 50px;
  bottom: 0;
  background-color: #D9D9D9; /* light gray */
  color: #404040; /* gray */
  position: absolute;
}
#fixed {
  height: 50px;
  position: fixed;
  bottom: 0;
  background-color: #4B99D3;
} 
#fixed-parent {
  position: relative;
  margin-bottom: 50px;
}

jQuery

$(document).scroll(function() {
  checkOffset();
});
function checkOffset() {
  if($('#fixed').offset().top + $('#fixed').height() >= $('#footer').offset().top - 10)
    $('#fixed').css('position', 'absolute');
  if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
    $('#fixed').css('position', 'fixed'); // restore when you scroll up
}

HTML

<div id="fixed-parent">
  <div id="fixed">
    fixed content...
  </div>
</div>
<div id="footer">
  footer content...
</div>

Example here: http://jsfiddle.net/e5q04cv2/