JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">    
<h1 style="color: #FFF;">Scroll this page...</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta justo in tellus porttitor non placerat dui pulvinar. Aliquam erat volutpat. Morbi ullamcorper libero sit amet tortor porta iaculis. Duis sit amet diam dolor. Mauris bibendum pharetra justo, sed ornare arcu scelerisque vitae. Integer molestie dignissim lacinia. Etiam sagittis consectetur iaculis. Pellentesque fringilla nulla at tortor dictum lobortis.
</p>
<p>This demo is associated with  the following article/tutorial: <a href="http://www.dwuser.com/education/content/creating-a-floating-navigation-menu/" style="color: #FF0;">Creating a Floating Navigation Menu</a></p>
<p>
    Aliquam erat volutpat. Integer pulvinar dignissim lacus eu lacinia. Sed vitae orci eget nisl ultricies feugiat quis ut velit. Sed urna mauris, viverra volutpat pulvinar et, tempus vel odio. Aenean at posuere massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam quis augue nisi, quis ornare nisl. Nulla sagittis neque at massa venenatis tincidunt. Morbi sed nibh magna, vel consectetur nisi. Nullam tortor augue, scelerisque et consequat eu, fermentum at eros. Donec scelerisque ullamcorper tincidunt.
</p>
<p>
Pellentesque ut nulla dolor. Sed non diam odio, ac luctus mauris. Nunc erat turpis, imperdiet vel laoreet laoreet, scelerisque vel dui. Sed nec nisl nulla, ut gravida neque. Mauris augue nibh, accumsan id viverra et, pellentesque a orci. Integer venenatis congue urna a ornare. Fusce in facilisis tortor. In lobortis est non lacus cursus venenatis. Donec a metus erat, id rhoncus turpis. Quisque vitae venenatis tellus. Donec quis risus erat, in luctus justo. Nulla ultrices, urna quis faucibus vehicula, lorem nibh tristique magna, nec tristique augue massa sit amet arcu. Donec malesuada, erat iaculis pretium ultricies, lorem nisl lacinia tellus, vel luctus augue nunc eget metus. Vestibulum ante ipsum...

CSS

body {
   background-color: #333;  
   color: #999;
   font: 12px/1.4em Arial,sans-serif;
}
.blueBackground {
   background-color: #39F; 
}
#wrap {
   margin: 10px auto;        
   background: #666;
   padding: 1px 10px;
   width: 700px;
}
#magicBox {
   padding: 15px;
   background: #FFF;
   color: #F00;
   font-size: 16px;
   line-height: 20px; 
   border: 2px solid #F00;    
}

JavaScript

$(function() {
    
    // First, determine the y position of the #magicBox element; display it in the box.
    var magicBoxY = $('#magicBox').offset().top;
    $('#yPos').text(magicBoxY);
    
    // Create a jQuery reference to the window. Then, listen for scrolling.
    var $w = $(window);
    $w.scroll(function() {    
        
        // Get the current scroll position
        var scrollPosition = $w.scrollTop();
        
        // If we have reached the magic box, change the background color
        var belowMagicBox = scrollPosition >= magicBoxY;
        $('body').toggleClass('blueBackground', belowMagicBox);
        
    });
});