Fixed DIV container to stop floating by reaching the footer part of the page

Fixed DIV container to stop floating by reaching the footer part of the page

I have a javascript for floating #container along the page height after
#header is passed. Now I want it to stop its fixed floating by reaching
#footer div (or its parent div, as this have padding). #footer's height is
more than 800px, so the #container should lose its top margin value by
touching #footer and continue scrolling the page without that floating
div. Thank you!
 $(window).scroll(function() {
if ($(window).scrollTop() >= 300) {
screenWidth = $(window).width();
containerWidth = $("#content-4").outerWidth(true);
pos = screenWidth - containerWidth;
$("#content-5").css({
position: 'fixed',
left: 'auto',
top: '20px'
});
}
else {
$("#content-5").css({
position: 'absolute',
left: '20px',
top: '20px'
});
}
});