JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class='nav'><br><h1>Nav</h1></section>
<section class='content'></section>
<section class='footer'><br><h1>Magical Footer</h1></section>

CSS

*{width:100%;margin:0;padding:0;color:white;text-align:center}
.nav{
  background: #00A19D;
  height:60px;
}
.content{
  background: #FFF8E5;
  height:6000px;
}
.footer{
  background: #345B63;
  height:200px;
  display:none;
}

JavaScript

let footerVisible = false;
var docHeight = 0;

$(window).scroll(function() {
   var scrollPos = $(window).scrollTop() + $(window).height();
   if(footerVisible == false){docHeight = $(document).height()}
   
   if(scrollPos >= docHeight / 2){
    footerVisible = true;
    $('.footer').css('display', 'block');
   }
});