JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="first"></div>
    <div id="elem" class="absolute_pos">Top</div>
</div>

CSS

#container {
    width: 100%;
    height: 1000px;
    float: left;
}

#elem {
    width:80px;
    height:50px;
    background:#333;
    color:#FFF;
    text-align:center;
    right: 0;
}

.first{
    background-color: green;
    height: 1000px;
}

.absolute_pos{
    position: absolute;
    top: 600px;
    
}

.fixed_pos{
    position:fixed;
    bottom: 20px;
}

JavaScript

var oldElemBottom;

function isScrolledIntoView(elem) {
    var win = $(window),
        marginBot = 20,
        docViewTop = $(window).scrollTop(),
        docViewBottom = docViewTop + $(window).height(),
        elemTop = $(elem).offset().top,
        elemBottom = elemTop + $(elem).height();
        
    if (typeof oldElemBottom !== 'undefined'){
        elemBottom = oldElemBottom;
    }
    if ((win.scrollTop() + win.height()  - marginBot) >= elemBottom){
        oldElemBottom = elemBottom;    
        return true
    } else {
        return false
    };
}

$(window).scroll(function() {
    var elem = $('#elem');
    if (isScrolledIntoView(elem) === true) {
         elem.removeClass('absolute_pos').addClass('fixed_pos');   
    } else {
        elem.removeClass('fixed_pos').addClass('absolute_pos');  
    }
});