JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content"></div>

<div id="foot"></div>

CSS

body {
    background-color: #fff;
    font-family:Tahoma, Geneva, sans-serif;
    font-style: normal;
    text-align:justify;
    font-variant: normal;
    color: #bbb;
    font-size: 10px;
    font-weight: 100;
    margin: 0;
    padding: 0;
}

#content {
    width:500px;
    height:400px;
    background-color:#f2f2f2;
    left:50%;
    position:absolute;
    margin-left:-250px;
}

#foot {
    background-color:#666;
    position:absolute;
    width:500px;
    height:40px;
    bottom:15px;
    left:50%;
    margin-left:-250px;
}

JavaScript

$(function(){
    
    $(document).scroll(function(){
        
        var topDistance = $('#foot').scrollTop();
        
        if(topDistance >= 420){
            $('#foot').css({position: 'absolute',bottom:'10px'});
        }
        
        else{
                $('#foot').css({position: 'absolute',top:'410px'});
        }
        
    });


})