JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
		<ul>
			<li><a href="#home-section" class="nav-active">Home</a></li>
			<li><a href="#about-section">About</a></li>
			<li><a href="#products-section">Products</a></li>
			<li><a href="#contact-section">Contact</a></li>
		</ul>
	</div>
	<div class="body-wrapper">
		<img src="http://lorempixel.com/960/450" />
		<div id="home-section" class="section">
			<h3>Home heading</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<div id="about-section" class="section">
			<h3>About heading</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim...

CSS

*{
	margin: 0;
	padding: 0;
}

body{
	min-height: 100%;
	background-color: #aaaabb;
}

#header{
	-webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

#header.fixed{
    background-color: #FFFFFF;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    color: #000;
}

#header ul,
#footer ul {
	list-style: none;
	text-align: center;
	padding-bottom: 15px;
}

#header ul li,
#footer ul li{
	display: inline-block;
}

#header li a.nav-active{
	color: #1F2ED1;
}

#header ul li a,
#footer ul li a{
	text-decoration: none;
	padding: 8px;
	text-transform: uppercase;
	color: #cecece;
	display: block;
}

.body-wrapper{
	width: 960px;
	margin: 0 auto;
}

.section{
	margin-bottom: 20px;
}

.extra-block{
	margin: 25px auto;
	background-color: #993333;
	color: #fff;
	padding:10px;
}

#footer{

}

JavaScript

var hei = $("#header").height();
	$(window).scroll(function(){
		if($(window).scrollTop() > hei){
			$("#header").addClass('fixed');
			$('.body-wrapper').css('margin-top',hei);
		}else{
			$("#header").removeClass('fixed');
			$('.body-wrapper').css('margin-top','0');
		}
	});
	$("#header li a").on('click', function(event){
		event.preventDefault();
		var header_height = $("#header").height();
		var target = $(this).attr('href');
	    $('html, body').animate({
	        scrollTop: $(target).offset().top-header_height
	    }, 1000);
	});
		
	var aChildren = $("#header li").children(); // find the a children of the list items
    var aArray = []; // create the empty aArray
    for (var i=0; i < aChildren.length; i++) {    
        var aChild = aChildren[i];
        var ahref = $(aChild).attr('href');
        aArray.push(ahref);
    } // this for loop fills the aArray with attribute href values

	$(window).scroll(function(){
        var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
        var windowHeight = $(window).height(); // get the height of the window
        var docHeight = $(document).height();

 
        for (var i=0; i < aArray.length; i++) {
            var theID = aArray[i];
            var divPos = $(theID).offset().top-hei-30; // get the offset of the div from the top of page
            var divHeight = $(theID).height(); // get the height of the div in question
            if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
                $("a[href='" + theID + "']").addClass("nav-active");
            } else {
                $("a[href='" + theID + "']").removeClass("nav-active");
            }
        }

    });