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

Question

I’m on a single-page project, and I need a div that increases as I scroll down, but when I scroll up it can’t decrease, it has to stand still, the size it was until it went down again. I am using Jquery with the following code:

the HTML:

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

the 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;
}

the 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.

Answer 1

Mauro, you just need to check scroll is greater than height of div:

$(function(){
    $(window).scroll(function() {
        var $broca = $('#broca');
        var st = $(this).scrollTop();
        if (st > $broca.height()){
            $broca.height( st );
        }
        if( st == 0 ) {
            $broca.hide();
        } else {
            $broca.show();
        }
    }).scroll();
})

Jsfiddle