JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div>

<div id="container">
    <div class="column" style="left: 0px; opacity: 1;"><p>01</p></div>
    <div class="column" style="left: 0px; opacity: 1;"><p>02</p></div>
    <div class="column" style="left: 0px; opacity: 1;"><p>03</p></div>
    <div class="column" style="left: 0px; opacity: 1;"><p>04</p></div>
    <div class="column" style="left: 0px; opacity: 1;"><p>05</p></div>
    <div class="column" style="left: 0px; opacity: 1;"><p>06</p></div>
    <div class="column" style="left: 0px; opacity: 1;"><p>07</p></div>
    <div class="column" style="left: 0px; opacity: 1;"><p>08</p></div>
<div class="loading"></div>    
<div id="footer"></div>

</div>

CSS

#container {
top: 70px;
bottom: 20px;
position: absolute;
left: 50px;
margin: 0;
padding: 20px;
background: black;
width:100%;
overflow: hidden;
}

.column {
width: 300px;
height: 100%;
float: left;
padding: 0px;
background: lightgrey;
margin: 0px 20px 20px 0px;
}

#header {
left:0;
top:0;
width:100%;
position: fixed;
height: 50px;
background:cyan;
}

p { font-size: 70px; text-align: center; }

#footer {
height: 100%;
width: 50px;
right: 0;
padding: 0;
}

div.loading {
  width: 100px;
  height: 100%;
  right: 50px;
  background-image: url('http://www.quickflashgames.com/images/loading-thumb.gif');
  background-repeat: no-repeat;
  background-position: center center;
}

div.loading, #footer {
  position: absolute;
	top: 0;
}

JavaScript

(function($){$.fn.onScreen=function(options){var params=$.extend({container:window,direction:'vertical',toggleClass:null,doIn:null,doOut:null,tolerance:0,throttle:null,lazyAttr:null,lazyPlaceholder:'data:image/gif;base64,R0lGODlhEAAFAIAAAP///////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCQAAACwAAAAAEAAFAAACCIyPqcvtD00BACH5BAkJAAIALAAAAAAQAAUAgfT29Pz6/P///wAAAAIQTGCiywKPmjxUNhjtMlWrAgAh+QQJCQAFACwAAAAAEAAFAIK8urzc2tzEwsS8vrzc3tz///8AAAAAAAADFEiyUf6wCEBHvLPemIHdTzCMDegkACH5BAkJAAYALAAAAAAQAAUAgoSChLS2tIyKjLy+vIyOjMTCxP///wAAAAMUWCQ09jAaAiqQmFosdeXRUAkBCCUAIfkECQkACAAsAAAAABAABQCDvLq83N7c3Nrc9Pb0xMLE/P78vL68/Pr8////AAAAAAAAAAAAAAAAAAAAAAAAAAAABCEwkCnKGbegvQn4RjGMx8F1HxBi5Il4oEiap2DcVYlpZwQAIfkECQkACAAsAAAAABAABQCDvLq85OLkxMLE9Pb0vL685ObkxMbE/Pr8////AAAAAAAAAAAAAAAAAAAAAAAAAAAABCDwnCGHEcIMxPn4VAGMQNBx0zQEZHkiYNiap5RaBKG9EQAh+QQJCQAJACwAAAAAEAAFAIOEgoTMysyMjozs6uyUlpSMiozMzsyUkpTs7uz///8AAAAAAAAAAAAAAAAAAAAAAAAEGTBJiYgoBM09DfhAwHEeKI4dGKLTIHzCwEUAIfkECQkACAAsAAAAABAABQCDvLq85OLkxMLE9Pb0vL685ObkxMbE/Pr8////AAAAAAAAAAAAAAAAAAAAAAAAAAAABCAQSTmMEGaco8+UBSACwWBqHxKOJYd+q1iaXFoRRMbtEQAh+QQJCQAIACwAAAAAEAAFAIO8urzc3tzc2tz09vTEwsT8/vy8vrz8+vz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAEIhBJWc6wJZAtJh3gcRBAaXiIZV2kiRbgNZbA6VXiUAhGL0QAIfkECQkABgAsAAAAABAABQCChIKEtLa0jIqMvL68jI6MxMLE////AAAAAxRoumxFgoxGCbiANos145e3DJcQJAAh+QQJCQAFACwAAAAAEAAFAIK8urzc2tzEwsS8vrzc3tz///8AAAAAAAADFFi6XCQwtCmAHbPVm9kGWKcEQxkkACH5BAkJAAIALAAAAAAQAAUAgfT29Pz6/P///wAAAAIRlI8SAZsPYnuJMUCRnNksWwAAOw==',debug:false},options);return this.each(function(){var isOnScreen=false;var scrollTop;var scrollLeft;var $el=$(this);var $container;var containerHeight;var containerWidth;var containerBottom;var containerRight;var elHeight;var elWidth;var elTop;var elLeft;var containerIsWindow=$.isWindow(params.container);function verticalIn(){if(containerIsWindow){return elTop<containerBottom-params.tolerance&&scrollTop<(elTop+elHeight)-params.tolerance;}else{return...