JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://benpickles.github.com/onScreen/jquery.onscreen.js"></script>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
CSS
.elem {
padding: 1em;
font-family: Helvetica;
font-size: 18px;
background: black;
color: white;
width: 100%;
}
.elem.last {
background: red;
color: white;
}
JavaScript
$(document).ready(function() {
$(window).scroll(function() {
$('.elem').removeClass("temp last")
$('.elem').filter(":onScreen").addClass("temp")
$(".temp").eq(-1).addClass("last")
});
});