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

Question

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'
        });
    }
});

Answer 1

This should be it:

  $(window).scroll(function () {
      if (($(document).height() - $(window).scrollTop()) <= 500){
          $("#content-5").css({
              position: 'fixed',
              top: 'auto',
              bottom: '300px'
          });
      } else if ($(window).scrollTop() >= 30) {
          $("#content-5").css({
              position: 'fixed',
              top: '30px',
              bottom: 'auto'
          });
      }else{
          $("#content-5").css({
              position: 'absolute',
              top: '30px',
              bottom: 'auto'
          });
      }
  });

jsFiddle

You need to adjust the numbers based on your header and footer size.

Answer 2

give a higher z-index to footer and a lower one to content

http://jsfiddle.net/vErBy/4/

#content {
height:200px;
width:400px;
position: fixed;
z-index: 1;
background-color:red;
}

#footer {
position: relative;
top:500px;
bottom: 0;
width:400px;
right: 0;
height: 800px;
z-index: 1;
background-color:blue;
}