JSFiddle - React, Tailwind, and code Playground

by Samir Chaves

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

JavaScript

$(function(){
    lastScrollTop = 0;
    $(window).scroll(function() {
        var $broca = $('#broca');
        var st = $(this).scrollTop();
        
    if ((st > lastScrollTop) && (st > $broca.height())) {
        // downscroll code
            $broca.animate({'height': st}, 100 );
    } else {
        // upscroll code
            $broca.animate({'height': st}, 100 );
    }

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