Switch div from fixed to absolute at bottom of browser

Question

Im trying to add a footer at the bottom of this content that doesn't overlay the content but moves it up.

The only way I can see it working would be something like, when browser is at the bottom remove 'fixed' class on the left red '#work'.

js fiddle DEMO

Updated js fiddle DEMO

HTML

<div id="header-block">
    Header-block, this sits here in the background
</div>

<div id="content">
    <div id="work">
        This content should be fixed when at the top
    </div>
    <div id="description">
        This content should scroll -
    </div>

</div><!-- end content -->

<div id="footer">
    This should appear at the bottom
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
#header-block {
    background: green;
    width: 100%;
    position: fixed;
    z-index: 1;
    height: 300px;
    top: 0;
}
#content {
    margin-top: 300px;
    width: 100%;
    position: relative;
    z-index: 2;
}
#work {
    background: red;
    width: 50%;
    height: 100vh;
    float: left;
    position: absolute;
}
#description {
    background: blue;
    width: 50%;
    height: 1200px;
    float: right;
    font-size: 30px;
}
#footer {
    background: black;
    width: 100%;
    height: 100px;
    position: absolute;
    z-index: 3;
    bottom: 0;
}

Answer 1

If I understand your question correct, this should do the trick (although it depends very much on JavaScript unfortunately).

// Fix work column on scroll
contentStart = $("#content").offset().top ;
contentSize  = $("#content").height() ;

window.onscroll = function(){   
    if( window.XMLHttpRequest ) {
        var position=window.pageYOffset;

        // calculate the position of the footer and the actual seen window            
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $("#footer").offset().top;

         if ( position > 300 && !(docViewBottom >= elemTop)) {
             $('#work').css({'position':'fixed', 'top':'0', 'height':'100vh'});
          } else {
              // if the footer is visible on the screen
              if(docViewBottom >= elemTop) {
                 $('#work').css({ 'top': 0 - (docViewBottom - elemTop) }); // scroll the #main div relative to the footer       
              } else {
                  $('#work').css({'position':'relative', 'top': 'auto'}) ;
              }
         }

    }
}

For further informations about the calculations, perhaps this question on stackoverflow is useful.

Edit: Andrew Haining posted his answer in between of my answer, perhaps give his link a try and maybe it's a better (more proper) solution. Unfortunately I haven't actualised this page when I was testing your code in JSFiddle and I didn't see his answer.

If you want to use my script, make sure you can test it with different resolutions. It works just fine for my resolution in JSFiddle, I didn't test any other.

Answer 2

I'm not 100% sure what you want, but if you remove the position: absolute and the bottom: 0 from the footer, and put a div with class='clearboth' above the footer, it seems to do what you need.

CSS

.clearboth {
    clear: both;
}

---

This is a drawing of what I see on your fiddle;

Do you want the red and the blue to always be touching the black?

I don't see the red overlying the black