JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
<div class="navbar">Scroll down</div>
<div style="height: 600px"></div>
<div id="whitediv">Waypoint</div>
<div style="height: 600px">Scroll more</div>

CSS

.navbar{
    background: transparent;
    position:fixed;
    width: 100%;
}

JavaScript

$('#whitediv').waypoint(function() {
    alert('Change your background color of div');
    $('.navbar').css('background-color', '#000000');
}, {
    offset: '5%'
});