JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://imakewebthings.com/jquery-waypoints/waypoints.js"></script>
<div class="wrapper">
    <div id="sec1" class="section">dfa fdasfsdafd as</div>
    <div id="sec2" class="section">dfa fdasfsdafd as</div>
    <div id="sec3" class="section">dfa fdasfsdafd as</div>
    <div id="sec4" class="section">dfa fdasfsdafd as</div>
</div>

CSS

html, body, .wrapper, .section {
    height:100%;
}
.wrapper {
    overflow-x: hidden;
    overflow-y: auto;
}

JavaScript

$('#sec3').waypoint(function () {
    $('#sec3').css("backgroundColor", "#f99");
}, {
    context: '.wrapper'
});