How to increase height as scroll scrolls the page but not decrease with scroll up?

I'm in a single page project, and I need a div that increases as I go down the page, but when it goes up it can not go down, it has to stay still, the size it was until it went down again. I'm using JQuery with the following code:

HTML:

<header></header>
<div id="content">
    <div id="broca">
    </div>
</div>

CSS:

header, footer{
    display:block;
    height:200px;
    background:red;
    width:100%;
}
#content{
    display:block;
    width:100%;
    height:1500px;
    background:blue;
}
#broca{
    width:50px;
    height:0;
    background:#000;
}

JQUERY:

$(function(){
$(window).scroll(function() {
    var $broca = $('#broca');
    var st = $(this).scrollTop();

    $broca.height( st );
    if( st == 0 ) {
        $broca.hide();
    } else {
        $broca.show();
    }
}).scroll();

jsFiddle for example.