JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div class="screen"></div>
<div class="footer"></div>

CSS

.screen{
    width:100%;
    height: 800px;
    background: gray;
}

.footer{
    opacity: 1.0;
    width:100%;
    height:200px;
    background: red;
}

JavaScript

$(function(){
var top = $('.footer').offset().top;
    console.log($('.footer').height());
$(window).scroll(function(){
        if(($(this).scrollTop() + $('.footer').height()) >= top){
          // adding a little more to the footerTop's value may give a better feeling.
            $( '.footer' ).animate({opacity: 1.0}, 1000);
        } 
    });
 });