fixing the bottom of div to the bottom of screen on scroll

Question

hello all i was wondering how to achieve this. i have a page in which there are three divs floating left and have width as 20% 60% and 19% all the divs are of veritable height but always the height of middle one is far greater then the other two . so want that whenever i scroll the page to see the bottom of middle div the bottom of other div stick to the screen as it is and automatically gets released when scrolled up to top.

i know this is possible here is what i just noticed in a site http://resources.infosecinstitute.com/checking-out-backdoor-shells/ the extreme right div is similer example of what is want.

can anyone please help me to achieve this.

 onscroll event can be applied here by js like 
 onscroll if // check if the div is about to end then fix it as it is 
  else // release it.

Answer 1

$( "#target" ).scroll(function() {
                    $( "#div_left" ).css( {'position': 'fixed' , 'bottom' : '20px'} );
                    $( "#div_right" ).css( {'position': 'fixed' , 'bottom' : '20px'} );
});

Answer 2

Demo

js

$(window).scroll(function () {
    if ($(this).scrollTop() > $('#test').height()) {
        $('#test').addClass('fixed');
    } else {
        $('#test').removeClass('fixed');
    }
});

css

body, html {
    height:1000px;
    position:relative;
    margin:0;
    padding:0;
}
#test {
    height:50px;
    background-color:blue
}
.fixed {
    position:fixed;
    bottom:0;
    z-index:2;
    width:100%;
}