How to increase height in an animated way?

Navigation
3

I'm in a project and need an object on the side of the page that increases the height as scroll.

The result I've achieved so far is "breaking down" as I scroll down the scroll . How do I get something that is more animated or has a smoother transition?

HTML: 

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

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();
        if (st > $broca.height()){
            $broca.height( st );
        }
        if( st == 0 ) {

        } else {
            $broca.show();
        }
    }).scroll();
})

JSFiddle

    
asked by anonymous 25.08.2014 / 22:17

2 answers

1

You can use .animate , but as the scroll does run several animates at the same time, it can still show some stops, the solution I found was to use .clearQueue looks more linear: 

$(function(){
    $(window).scroll(function() {
        var $broca = $('#broca');
        var st = $(this).scrollTop();
        if (st > $broca.height()){
            $broca.clearQueue().animate({
                height: st } , 1000);
        }
        if( st == 0 ) {

        } else {
            $broca.show();
        }
    }).scroll();
})

(just adjust the speed as desired, maybe make a calculation according to the size of the st)

JSFiddle

    
25.08.2014 / 23:19
0

I noticed that in your example when scrolling up the size of the div does not follow what happens when scrollBar down, so I adapted, I do not know if that's what I wanted, but I thought so, if you do not want me please let me know in the comments.

I applied the animate() property that creates the change css with a transition;

Then any questions let me know that I will do my best to help you.

JsFiddle

    
25.08.2014 / 22:49
Does not return value pro javascript Preloader Asp.net MVC