JSFiddle - React, Tailwind, and code Playground

HTML

<footer></footer>

CSS

body {
    height: 5000px;
}
footer {
    height: 30px;
    width: 100%;
    background: #000;
    position: fixed;
    bottom: 0;
}

JavaScript

var docHeight = $(document).height();
var footerHeight = $('footer').height();

$(document).scroll(function() {
    
    var scTop = $(document).scrollTop();
    var x = 300;
    
    if (scTop/x > 1) {
        $('footer').css('height', scTop/x*footerHeight);
        console.log(scTop);
    } else {
        $('footer').css('height', footerHeight);
    }
    
});