Variable keeps growing even if condition is not met

I'm trying to animate a div on scroll. The point is that the div's width must grow until it reaches 80vw and stop. This does happen, but my variable keeps on growing (it's being logged to the console) even if the >=outerWidth*0.8 condition isn't met. Thanks to this, whenever I get to 80vw and scroll up and then down, the width becomes Xvw.

$(window).on('scroll',function(){
    var scrollTop = $(this).scrollTop();
    var outerHeight = $(this).outerHeight();
    var outerWidth = $(this).outerWidth();
    var scrollBottom = scrollTop + outerHeight;
    var scrollTop = $(this).scrollTop();


    console.log( growNaranja );
    if (scrollTop > lastScrollTop){ // scroll down
        if( naranjaWidth <= (outerWidth*0.8)  ){
            growNaranja = (naranja.outerWidth()*100) / outerWidth;
            growNaranja = growNaranja+(scrollTop*0.05);
            $('.grow.naranja').css( 'width', growNaranja + 'vw' );
        }
    } else { // scroll up
        if( naranjaWidth >= (outerWidth*0.1)  ){
            growNaranja = (naranja.outerWidth()*100) / outerWidth;
            $('.grow.naranja').css( 'width', growNaranja + 'vw' );
            growNaranja = growNaranja - ((lastScrollTop-scrollTop)*0.05);
            $('.grow.naranja').css( 'width', growNaranja + 'vw' );
        }
    }

    lastScrollTop = scrollTop;
});

You can see a working example here.