JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<div id="main">
    <div id="results"></div>
    <div id="other">OTHER DIV</div>
    <div id="filler">This div grows on scroll</div>
</div>

CSS

#filler {
    background-color:#4090D7;
    color:#00f;
    height: 500px;
}
#main {
    height:1900px;
    background-color:#eee;
}
#results {
    position:fixed;
    top:300px;
    left:250px;
    width:32px;
    height:32px;
    display:block;
    background-color:#FFF;
    border: 2px solid black;
}
}
#other {
    height:400px;
    display:block;
    border:1px solid #000;
}

JavaScript

$(function () {
    $(window).scroll(function () {
        var $myDiv = $('#filler');
        var y = $(this).scrollTop();
        $('#results').text(y);
        x = y - 5;
        $myDiv.animate({
            height: x
        }, 5);
    }).scroll();
});